@atlaskit/textarea 5.8.2 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/textarea
 
+## 6.0.0
+
+### Major Changes
+
+- [#95577](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95577)
+  [`ad478a9dbc399`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ad478a9dbc399) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/textarea`, you will need to ensure that your bundler is configured
+  to handle `.css` imports correctly.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understand how to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+  Removed styles.tsx and component-tokens.tsx and their entry points from package.json
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.8.2
 
 ### Patch Changes

package/dist/cjs/text-area.compiled.css

@@ -0,0 +1,88 @@
+._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._v5641gs0{transition:var(--_19uzta9)}
+._153gksl0[data-invalid]:not(:focus){border-color:var(--_1u9fbts)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._19wt1elr:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8590a2)}
+._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
+._1bqs13gt:disabled:not(:focus){border-color:var(--ds-border-disabled,#091e420f)}
+._1dqoglyw{border-style:none}
+._1dqonqa1{border-style:solid}
+._1fraksl0:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--_1u9fbts)}
+._kp821elr:not(:focus){border-color:var(--ds-border-input,#8590a2)}
+._kp821j28:not(:focus){border-color:transparent}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._12ym18uv:hover:not(:read-only):not(:focus){background-color:initial}
+._12ym1d5g:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._13xeglyw:invalid{box-shadow:none}
+._14zg1e08{resize:horizontal}
+._14zg1e54{resize:vertical}
+._14zg1hrf{resize:both}
+._14zgglyw{resize:none}
+._16jlkb7n{flex-grow:1}
+._16lw1cn1:not([data-compact]){min-height:var(--_n9nqvh)}
+._17km12x7:not([data-compact]){padding-left:var(--ds-space-075,6px)}
+._17km1v6z:not([data-compact]){padding-left:7px}
+._18m91wug{overflow-y:auto}
+._18u0idpf{margin-left:0}
+._19k01ouc:hover:not(:read-only):not(:focus):disabled{background-color:var(--_r5pknd)}
+._19pkidpf{margin-top:0}
+._19qkv77o[data-compact]{padding-top:var(--ds-space-025,2px)}
+._1a2sh9qi[data-invalid]:not(:focus){box-shadow:var(--_1l1juom)}
+._1a4912x7:not([data-compact]){padding-bottom:var(--ds-space-075,6px)}
+._1bsb1osq{width:100%}
+._1dbiv77o[data-compact]{padding-bottom:var(--ds-space-025,2px)}
+._1e0c1ule{display:block}
+._1etu12x7[data-compact]{padding-left:var(--ds-space-075,6px)}
+._1etu1v6z[data-compact]{padding-left:7px}
+._1goxglyw::-ms-clear{display:none}
+._1idrpsu8::-ms-input-placeholder{color:var(--_vrm7dk)}
+._1idrpsu8::placeholder{color:var(--_vrm7dk)}
+._1itd12x7:not([data-compact]){padding-top:var(--ds-space-075,6px)}
+._1lephxcb:disabled::-ms-input-placeholder{color:var(--_dnrmjm)}
+._1lephxcb:disabled::placeholder{color:var(--_dnrmjm)}
+._1ltx18uv:not(:focus){background-color:initial}
+._1ltx1j9a:not(:focus){background-color:var(--ds-background-input,#fff)}
+._1n388sxn:not([data-compact]){line-height:1.4285714285714286}
+._1o9zkb7n{flex-shrink:1}
+._1qu2glyw{outline-style:none}
+._1reo1wug{overflow-x:auto}
+._1ul9idpf{min-width:0}
+._2hwxidpf{margin-right:0}
+._6zpvh9qi:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:var(--_1l1juom)}
+._cfjqkb7n:disabled{-webkit-opacity:1}
+._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._i0dl1osq{flex-basis:100%}
+._ibjd12ci:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--_1z08gfx)}
+._j5dh13gf:disabled{cursor:not-allowed}
+._k3o7n7od:disabled{-webkit-text-fill-color:unset}
+._kqswh2mm{position:relative}
+._nmhq1fiz[data-compact]{line-height:1.1428571428571428}
+._otyridpf{margin-bottom:0}
+._p12f1osq{max-width:100%}
+._slp31hna{word-wrap:break-word}
+._syazovqm{color:var(--_5xk3r4)}
+._usy41kd8[data-invalid]:not(:focus){background-color:var(--_4mkb4g)}
+._uzq71d1b[data-compact]{min-height:var(--_dqsusn)}
+._vbqbhxcb:disabled{color:var(--_dnrmjm)}
+._vchhusvi{box-sizing:border-box}
+._wg6012x7:not([data-compact]){padding-right:var(--ds-space-075,6px)}
+._wg601v6z:not([data-compact]){padding-right:7px}
+._z1pvsyzs:disabled:not(:focus){background-color:var(--ds-background-disabled,#091e4208)}
+._zedr12x7[data-compact]{padding-right:var(--ds-space-075,6px)}
+._zedr1v6z[data-compact]{padding-right:7px}
+._186j1p6i:disabled:focus{border-color:var(--ds-border-focused,#388bff)}
+._1luh3zdg[data-invalid]:focus{border-color:var(--_xjqa3d)}
+._858u1j28:focus{border-color:transparent}
+._858u1p6i:focus{border-color:var(--ds-border-focused,#388bff)}
+._1vj0119y[data-invalid]:focus{box-shadow:var(--_1n75f5r)}
+._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
+._7ehiq049:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
+._jomr18uv:focus{background-color:initial}
+._jomrr01l:focus{background-color:var(--ds-background-input-pressed,#fff)}
+._ndzbkwt5[data-invalid]:focus{background-color:var(--_t0vtv2)}
+._qu18syzs:disabled:focus{background-color:var(--ds-background-disabled,#091e4208)}
+@media (min-width:30rem){._1tn21oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}._14mdudxr{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)!important}}

package/dist/cjs/text-area.js

@@ -1,3 +1,4 @@
+/* text-area.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,35 +7,56 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./text-area.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _styles = require("./styles");
-var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value", "style"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/textarea";
-var packageVersion = "5.8.2";
+var packageVersion = "6.0.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
   packageVersion: packageVersion
 };
+var lineHeightBase = 20;
+var lineHeightCompact = 16;
+var compactVerticalPadding = 2;
+var verticalPadding = 6;
+var transitionDuration = '0.2s';
+var borderWidth = 2;
+var baseStyles = null;
+var appearanceStyles = {
+  standard: "_1dqonqa1 _kp821elr _1ltx1j9a _1bqs13gt _z1pvsyzs _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _17km1v6z _wg601v6z _858u1p6i _jomrr01l _7ehiq049 _186j1p6i _qu18syzs",
+  subtle: "_1dqonqa1 _kp821j28 _1ltx18uv _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _wg601v6z _17km1v6z _858u1p6i _jomrr01l _7ehiq049",
+  none: "_1dqoglyw _kp821j28 _1ltx18uv _19wt1j28 _12ym18uv _19qkv77o _zedr12x7 _1dbiv77o _1etu12x7 _1itd12x7 _wg6012x7 _1a4912x7 _17km12x7 _858u1j28 _jomr18uv _7ehi3sij"
+};
+var fontStyles = {
+  default: "_ect41sbm",
+  monospace: "_ect41odn _1tn21oud _14mdudxr",
+  large: "_11c81doa _1tn21oud"
+};
+var resizeStyles = {
+  horizontal: "_14zg1e08",
+  vertical: "_14zg1e54",
+  auto: "_14zg1hrf",
+  smart: "_14zgglyw",
+  none: "_14zgglyw"
+};
 var setSmartHeight = function setSmartHeight(el) {
   // Always reset height to auto before calculating new height
   el.style.height = 'auto';
-  var borderHeight = _styles.borderWidth;
+  var borderHeight = borderWidth;
   var paddingBoxHeight = el.scrollHeight;
   var borderBoxHeight = paddingBoxHeight + borderHeight * 2;
   el.style.height = "".concat(borderBoxHeight, "px");
@@ -66,7 +88,11 @@ var InnerTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onFocus = props.onFocus,
     onChange = props.onChange,
     value = props.value,
+    style = props.style,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var borderHeight = (0, _react.useMemo)(function () {
+    return appearance === 'none' ? 2 : 1;
+  }, [appearance]);
   (0, _react.useEffect)(function () {
     var el = ourRef.current;
     if (resize === 'smart' && el) {
@@ -107,19 +133,8 @@ var InnerTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     'data-compact': isCompact ? isCompact : undefined,
     'data-testid': testId ? testId : undefined
   };
-  var baseStyles = (0, _react.useMemo)(function () {
-    return (0, _styles.getBaseStyles)({
-      minimumRows: minimumRows,
-      resize: resize,
-      appearance: appearance,
-      isMonospaced: isMonospaced,
-      maxHeight: maxHeight
-    });
-  }, [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-array-arguments, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  var textAreaStyles = (0, _react2.css)([baseStyles, (0, _styles.dynamicStyles)(appearance)]);
-  return (0, _react2.jsx)("textarea", (0, _extends2.default)({}, controlProps, {
+  var compactMinHeightStyles = null;
+  return /*#__PURE__*/_react.default.createElement("textarea", (0, _extends2.default)({}, controlProps, {
     value: value,
     disabled: isDisabled,
     readOnly: isReadOnly,
@@ -129,12 +144,26 @@ var InnerTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onBlur: onBlurWithAnalytics,
     onFocus: onFocusWithAnalytics,
     rows: minimumRows
-    // TODO refactor to follow emotion styling rules
-    // see: https://product-fabric.atlassian.net/browse/DSP-6060
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: textAreaStyles
-  }, rest));
+  }, rest, {
+    className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rko1sit _11c81oud _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazovqm _slp31hna _153gksl0 _usy41kd8 _1a2sh9qi _vbqbhxcb _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fraksl0 _ibjd12ci _6zpvh9qi _19k01ouc _1idrpsu8 _1lephxcb _nmhq1fiz _1n388sxn _1luh3zdg _ndzbkwt5 _1vj0119y", appearanceStyles[appearance], (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && fontStyles['large'], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      maxHeight: maxHeight,
+      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
+      "--_19uzta9": (0, _runtime.ix)("background-color ".concat(transitionDuration, " ease-in-out,\n               border-color ").concat(transitionDuration, " ease-in-out")),
+      "--_dnrmjm": (0, _runtime.ix)("var(--ds-text-disabled, ".concat(_colors.N70, ")")),
+      "--_t0vtv2": (0, _runtime.ix)("var(--ds-background-input-pressed, ".concat(_colors.N0, ")")),
+      "--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")")),
+      "--_1n75f5r": (0, _runtime.ix)("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))),
+      "--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
+      "--_1u9fbts": (0, _runtime.ix)("var(--ds-border-danger, ".concat(_colors.R400, ")")),
+      "--_1l1juom": (0, _runtime.ix)("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")"))),
+      "--_r5pknd": (0, _runtime.ix)("var(--ds-background-disabled, ".concat(_colors.N20, ")")),
+      "--_1z08gfx": (0, _runtime.ix)("var(--ds-background-input-hovered, ".concat(_colors.N30, ")")),
+      "--_vrm7dk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+      "--_dqsusn": (0, _runtime.ix)("".concat(lineHeightCompact * minimumRows + compactVerticalPadding * 2 + borderHeight * 2, "px")),
+      "--_n9nqvh": (0, _runtime.ix)("".concat(lineHeightBase * minimumRows + verticalPadding * 2 + borderHeight * 2, "px"))
+    })
+  }));
 });
 
 /**
@@ -147,7 +176,7 @@ var InnerTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
 var TextArea = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function TextArea(props, ref) {
-  return (0, _react2.jsx)(InnerTextArea, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(InnerTextArea, (0, _extends2.default)({
     ref: ref
   }, props));
 }));

package/dist/es2019/text-area.compiled.css

@@ -0,0 +1,88 @@
+._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
+._153g78r2[data-invalid]:not(:focus){border-color:var(--ds-border-danger,#de350b)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._19wt1elr:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8590a2)}
+._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
+._1bqs13gt:disabled:not(:focus){border-color:var(--ds-border-disabled,#091e420f)}
+._1dqoglyw{border-style:none}
+._1dqonqa1{border-style:solid}
+._1fra78r2:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--ds-border-danger,#de350b)}
+._kp821elr:not(:focus){border-color:var(--ds-border-input,#8590a2)}
+._kp821j28:not(:focus){border-color:transparent}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._12ym18uv:hover:not(:read-only):not(:focus){background-color:initial}
+._12ym1d5g:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._13xeglyw:invalid{box-shadow:none}
+._14zg1e08{resize:horizontal}
+._14zg1e54{resize:vertical}
+._14zg1hrf{resize:both}
+._14zgglyw{resize:none}
+._16jlkb7n{flex-grow:1}
+._16lwuel1:not([data-compact]){min-height:var(--_eorxnz)}
+._17km12x7:not([data-compact]){padding-left:var(--ds-space-075,6px)}
+._17km1v6z:not([data-compact]){padding-left:7px}
+._18m91wug{overflow-y:auto}
+._18u0idpf{margin-left:0}
+._19k01y1w:hover:not(:read-only):not(:focus):disabled{background-color:var(--ds-background-disabled,#f4f5f7)}
+._19pkidpf{margin-top:0}
+._19qkv77o[data-compact]{padding-top:var(--ds-space-025,2px)}
+._1a2sr6rt[data-invalid]:not(:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#de350b)}
+._1a4912x7:not([data-compact]){padding-bottom:var(--ds-space-075,6px)}
+._1bsb1osq{width:100%}
+._1dbiv77o[data-compact]{padding-bottom:var(--ds-space-025,2px)}
+._1e0c1ule{display:block}
+._1etu12x7[data-compact]{padding-left:var(--ds-space-075,6px)}
+._1etu1v6z[data-compact]{padding-left:7px}
+._1goxglyw::-ms-clear{display:none}
+._1idr1wmz::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b778c)}
+._1idr1wmz::placeholder{color:var(--ds-text-subtlest,#6b778c)}
+._1itd12x7:not([data-compact]){padding-top:var(--ds-space-075,6px)}
+._1lep9jg2:disabled::-ms-input-placeholder{color:var(--ds-text-disabled,#a5adba)}
+._1lep9jg2:disabled::placeholder{color:var(--ds-text-disabled,#a5adba)}
+._1ltx18uv:not(:focus){background-color:initial}
+._1ltx1j9a:not(:focus){background-color:var(--ds-background-input,#fff)}
+._1n388sxn:not([data-compact]){line-height:1.4285714285714286}
+._1o9zkb7n{flex-shrink:1}
+._1qu2glyw{outline-style:none}
+._1reo1wug{overflow-x:auto}
+._1ul9idpf{min-width:0}
+._2hwxidpf{margin-right:0}
+._6zpvr6rt:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#de350b)}
+._cfjqkb7n:disabled{-webkit-opacity:1}
+._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._i0dl1osq{flex-basis:100%}
+._ibjd10ko:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--ds-background-input-hovered,#ebecf0)}
+._j5dh13gf:disabled{cursor:not-allowed}
+._k3o7n7od:disabled{-webkit-text-fill-color:unset}
+._kqswh2mm{position:relative}
+._nmhq1fiz[data-compact]{line-height:1.1428571428571428}
+._otyridpf{margin-bottom:0}
+._p12f1osq{max-width:100%}
+._slp31hna{word-wrap:break-word}
+._syazj3m3{color:var(--ds-text,#091e42)}
+._usy4mag2[data-invalid]:not(:focus){background-color:var(--ds-background-input,#fafbfc)}
+._uzq71i7i[data-compact]{min-height:var(--_6ny3x7)}
+._vbqb9jg2:disabled{color:var(--ds-text-disabled,#a5adba)}
+._vchhusvi{box-sizing:border-box}
+._wg6012x7:not([data-compact]){padding-right:var(--ds-space-075,6px)}
+._wg601v6z:not([data-compact]){padding-right:7px}
+._z1pvsyzs:disabled:not(:focus){background-color:var(--ds-background-disabled,#091e4208)}
+._zedr12x7[data-compact]{padding-right:var(--ds-space-075,6px)}
+._zedr1v6z[data-compact]{padding-right:7px}
+._186j1p6i:disabled:focus{border-color:var(--ds-border-focused,#388bff)}
+._1luh194a[data-invalid]:focus{border-color:var(--ds-border-focused,#2684ff)}
+._858u1j28:focus{border-color:transparent}
+._858u1p6i:focus{border-color:var(--ds-border-focused,#388bff)}
+._1vj01cu8[data-invalid]:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#2684ff)}
+._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
+._7ehiq049:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
+._jomr18uv:focus{background-color:initial}
+._jomrr01l:focus{background-color:var(--ds-background-input-pressed,#fff)}
+._ndzbr01l[data-invalid]:focus{background-color:var(--ds-background-input-pressed,#fff)}
+._qu18syzs:disabled:focus{background-color:var(--ds-background-disabled,#091e4208)}
+@media (min-width:30rem){._1tn21oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}._14mdudxr{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)!important}}

package/dist/es2019/text-area.js

@@ -1,21 +1,42 @@
+/* text-area.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./text-area.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { B200, N0, N10, N20, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "5.8.2";
+const packageVersion = "6.0.0";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,
   packageVersion
 };
+const lineHeightBase = 20;
+const lineHeightCompact = 16;
+const compactVerticalPadding = 2;
+const verticalPadding = 6;
+const transitionDuration = '0.2s';
+const borderWidth = 2;
+const baseStyles = null;
+const appearanceStyles = {
+  standard: "_1dqonqa1 _kp821elr _1ltx1j9a _1bqs13gt _z1pvsyzs _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _17km1v6z _wg601v6z _858u1p6i _jomrr01l _7ehiq049 _186j1p6i _qu18syzs",
+  subtle: "_1dqonqa1 _kp821j28 _1ltx18uv _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _wg601v6z _17km1v6z _858u1p6i _jomrr01l _7ehiq049",
+  none: "_1dqoglyw _kp821j28 _1ltx18uv _19wt1j28 _12ym18uv _19qkv77o _zedr12x7 _1dbiv77o _1etu12x7 _1itd12x7 _wg6012x7 _1a4912x7 _17km12x7 _858u1j28 _jomr18uv _7ehi3sij"
+};
+const fontStyles = {
+  default: "_ect41sbm",
+  monospace: "_ect41odn _1tn21oud _14mdudxr",
+  large: "_11c81doa _1tn21oud"
+};
+const resizeStyles = {
+  horizontal: "_14zg1e08",
+  vertical: "_14zg1e54",
+  auto: "_14zg1hrf",
+  smart: "_14zgglyw",
+  none: "_14zgglyw"
+};
 const setSmartHeight = el => {
   // Always reset height to auto before calculating new height
   el.style.height = 'auto';
@@ -42,8 +63,10 @@ const InnerTextArea = /*#__PURE__*/forwardRef((props, ref) => {
     onFocus,
     onChange,
     value,
+    style,
     ...rest
   } = props;
+  const borderHeight = useMemo(() => appearance === 'none' ? 2 : 1, [appearance]);
   useEffect(() => {
     const el = ourRef.current;
     if (resize === 'smart' && el) {
@@ -86,17 +109,8 @@ const InnerTextArea = /*#__PURE__*/forwardRef((props, ref) => {
     'data-compact': isCompact ? isCompact : undefined,
     'data-testid': testId ? testId : undefined
   };
-  const baseStyles = useMemo(() => getBaseStyles({
-    minimumRows,
-    resize,
-    appearance,
-    isMonospaced,
-    maxHeight
-  }), [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-array-arguments, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  const textAreaStyles = css([baseStyles, dynamicStyles(appearance)]);
-  return jsx("textarea", _extends({}, controlProps, {
+  const compactMinHeightStyles = null;
+  return /*#__PURE__*/React.createElement("textarea", _extends({}, controlProps, {
     value: value,
     disabled: isDisabled,
     readOnly: isReadOnly,
@@ -106,12 +120,16 @@ const InnerTextArea = /*#__PURE__*/forwardRef((props, ref) => {
     onBlur: onBlurWithAnalytics,
     onFocus: onFocusWithAnalytics,
     rows: minimumRows
-    // TODO refactor to follow emotion styling rules
-    // see: https://product-fabric.atlassian.net/browse/DSP-6060
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: textAreaStyles
-  }, rest));
+  }, rest, {
+    className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rko1sit _11c81oud _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v564r5cv _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazj3m3 _slp31hna _153g78r2 _usy4mag2 _1a2sr6rt _vbqb9jg2 _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra78r2 _ibjd10ko _6zpvr6rt _19k01y1w _1idr1wmz _1lep9jg2 _nmhq1fiz _1n388sxn _1luh194a _ndzbr01l _1vj01cu8", appearanceStyles[appearance], fg('platform_design_system_team_safari_input_fix') && fontStyles['large'], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71i7i _16lwuel1"]),
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ...style,
+      maxHeight,
+      "--_6ny3x7": ix(lineHeightCompact * minimumRows + compactVerticalPadding * 2 + borderHeight * 2, "px"),
+      "--_eorxnz": ix(lineHeightBase * minimumRows + verticalPadding * 2 + borderHeight * 2, "px")
+    }
+  }));
 });
 
 /**
@@ -124,7 +142,7 @@ const InnerTextArea = /*#__PURE__*/forwardRef((props, ref) => {
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
 const TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
-  return jsx(InnerTextArea, _extends({
+  return /*#__PURE__*/React.createElement(InnerTextArea, _extends({
     ref: ref
   }, props));
 }));

package/dist/esm/text-area.compiled.css

@@ -0,0 +1,88 @@
+._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._v5641gs0{transition:var(--_19uzta9)}
+._153gksl0[data-invalid]:not(:focus){border-color:var(--_1u9fbts)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._19wt1elr:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8590a2)}
+._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
+._1bqs13gt:disabled:not(:focus){border-color:var(--ds-border-disabled,#091e420f)}
+._1dqoglyw{border-style:none}
+._1dqonqa1{border-style:solid}
+._1fraksl0:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--_1u9fbts)}
+._kp821elr:not(:focus){border-color:var(--ds-border-input,#8590a2)}
+._kp821j28:not(:focus){border-color:transparent}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._12ym18uv:hover:not(:read-only):not(:focus){background-color:initial}
+._12ym1d5g:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._13xeglyw:invalid{box-shadow:none}
+._14zg1e08{resize:horizontal}
+._14zg1e54{resize:vertical}
+._14zg1hrf{resize:both}
+._14zgglyw{resize:none}
+._16jlkb7n{flex-grow:1}
+._16lw1cn1:not([data-compact]){min-height:var(--_n9nqvh)}
+._17km12x7:not([data-compact]){padding-left:var(--ds-space-075,6px)}
+._17km1v6z:not([data-compact]){padding-left:7px}
+._18m91wug{overflow-y:auto}
+._18u0idpf{margin-left:0}
+._19k01ouc:hover:not(:read-only):not(:focus):disabled{background-color:var(--_r5pknd)}
+._19pkidpf{margin-top:0}
+._19qkv77o[data-compact]{padding-top:var(--ds-space-025,2px)}
+._1a2sh9qi[data-invalid]:not(:focus){box-shadow:var(--_1l1juom)}
+._1a4912x7:not([data-compact]){padding-bottom:var(--ds-space-075,6px)}
+._1bsb1osq{width:100%}
+._1dbiv77o[data-compact]{padding-bottom:var(--ds-space-025,2px)}
+._1e0c1ule{display:block}
+._1etu12x7[data-compact]{padding-left:var(--ds-space-075,6px)}
+._1etu1v6z[data-compact]{padding-left:7px}
+._1goxglyw::-ms-clear{display:none}
+._1idrpsu8::-ms-input-placeholder{color:var(--_vrm7dk)}
+._1idrpsu8::placeholder{color:var(--_vrm7dk)}
+._1itd12x7:not([data-compact]){padding-top:var(--ds-space-075,6px)}
+._1lephxcb:disabled::-ms-input-placeholder{color:var(--_dnrmjm)}
+._1lephxcb:disabled::placeholder{color:var(--_dnrmjm)}
+._1ltx18uv:not(:focus){background-color:initial}
+._1ltx1j9a:not(:focus){background-color:var(--ds-background-input,#fff)}
+._1n388sxn:not([data-compact]){line-height:1.4285714285714286}
+._1o9zkb7n{flex-shrink:1}
+._1qu2glyw{outline-style:none}
+._1reo1wug{overflow-x:auto}
+._1ul9idpf{min-width:0}
+._2hwxidpf{margin-right:0}
+._6zpvh9qi:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:var(--_1l1juom)}
+._cfjqkb7n:disabled{-webkit-opacity:1}
+._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._i0dl1osq{flex-basis:100%}
+._ibjd12ci:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--_1z08gfx)}
+._j5dh13gf:disabled{cursor:not-allowed}
+._k3o7n7od:disabled{-webkit-text-fill-color:unset}
+._kqswh2mm{position:relative}
+._nmhq1fiz[data-compact]{line-height:1.1428571428571428}
+._otyridpf{margin-bottom:0}
+._p12f1osq{max-width:100%}
+._slp31hna{word-wrap:break-word}
+._syazovqm{color:var(--_5xk3r4)}
+._usy41kd8[data-invalid]:not(:focus){background-color:var(--_4mkb4g)}
+._uzq71d1b[data-compact]{min-height:var(--_dqsusn)}
+._vbqbhxcb:disabled{color:var(--_dnrmjm)}
+._vchhusvi{box-sizing:border-box}
+._wg6012x7:not([data-compact]){padding-right:var(--ds-space-075,6px)}
+._wg601v6z:not([data-compact]){padding-right:7px}
+._z1pvsyzs:disabled:not(:focus){background-color:var(--ds-background-disabled,#091e4208)}
+._zedr12x7[data-compact]{padding-right:var(--ds-space-075,6px)}
+._zedr1v6z[data-compact]{padding-right:7px}
+._186j1p6i:disabled:focus{border-color:var(--ds-border-focused,#388bff)}
+._1luh3zdg[data-invalid]:focus{border-color:var(--_xjqa3d)}
+._858u1j28:focus{border-color:transparent}
+._858u1p6i:focus{border-color:var(--ds-border-focused,#388bff)}
+._1vj0119y[data-invalid]:focus{box-shadow:var(--_1n75f5r)}
+._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
+._7ehiq049:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
+._jomr18uv:focus{background-color:initial}
+._jomrr01l:focus{background-color:var(--ds-background-input-pressed,#fff)}
+._ndzbkwt5[data-invalid]:focus{background-color:var(--_t0vtv2)}
+._qu18syzs:disabled:focus{background-color:var(--ds-background-disabled,#091e4208)}
+@media (min-width:30rem){._1tn21oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}._14mdudxr{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)!important}}