@atlaskit/textarea 4.2.3 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/textarea
 
+## 4.3.0
+
+### Minor Changes
+
+- [`2e56ff8ea50`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e56ff8ea50) - [ux] Fixed a bug where smart resize did not work when the value prop was changed
+
+## 4.2.6
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
+## 4.2.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.2.4
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- [`af7c289395b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af7c289395b) - Fix TypeScript issue where text area HTML attributes were not exposed in component prop types.
+- Updated dependencies
+
 ## 4.2.3
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -3,71 +3,69 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparent = exports.disabledTextColor = exports.textColor = exports.placeholderTextColor = exports.subtleHoverBackgroundColor = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColorHover = exports.defaultBackgroundColor = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.invalidBorderColor = exports.disabledBorder = exports.disabledBackground = void 0;
+exports.transparent = exports.textColor = exports.subtleHoverBackgroundColor = exports.placeholderTextColor = exports.invalidBorderColor = exports.disabledTextColor = exports.disabledBorder = exports.disabledBackground = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var disabledBackground = {
-  light: (0, _tokens.token)('color.background.disabled', _colors.N20),
-  dark: (0, _tokens.token)('color.background.disabled', _colors.DN20)
+  light: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
+  dark: "var(--ds-background-disabled, ".concat(_colors.DN20, ")")
 };
 exports.disabledBackground = disabledBackground;
 var disabledBorder = {
-  light: (0, _tokens.token)('color.background.disabled', _colors.N40),
-  dark: (0, _tokens.token)('color.background.disabled', _colors.DN40)
+  light: "var(--ds-background-disabled, ".concat(_colors.N40, ")"),
+  dark: "var(--ds-background-disabled, ".concat(_colors.DN40, ")")
 };
 exports.disabledBorder = disabledBorder;
 var invalidBorderColor = {
-  light: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
-  dark: (0, _tokens.token)('color.iconBorder.danger', _colors.R400)
+  light: "var(--ds-border-danger, ".concat(_colors.R400, ")"),
+  dark: "var(--ds-border-danger, ".concat(_colors.R400, ")")
 };
 exports.invalidBorderColor = invalidBorderColor;
 var defaultBorderColor = {
-  light: (0, _tokens.token)('color.border.neutral', _colors.N40),
-  dark: (0, _tokens.token)('color.border.neutral', _colors.DN40)
+  light: "var(--ds-border, ".concat(_colors.N40, ")"),
+  dark: "var(--ds-border, ".concat(_colors.DN40, ")")
 };
 exports.defaultBorderColor = defaultBorderColor;
 var defaultBorderColorFocus = {
-  light: (0, _tokens.token)('color.border.focus', _colors.B100),
-  dark: (0, _tokens.token)('color.border.focus', _colors.B75)
+  light: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+  dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
 };
 exports.defaultBorderColorFocus = defaultBorderColorFocus;
 var defaultBackgroundColor = {
-  light: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N10),
-  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.DN10)
+  light: "var(--ds-background-neutral, ".concat(_colors.N10, ")"),
+  dark: "var(--ds-background-neutral, ".concat(_colors.DN10, ")")
 };
 exports.defaultBackgroundColor = defaultBackgroundColor;
 var defaultBackgroundColorHover = {
-  light: (0, _tokens.token)('color.background.default', _colors.N30),
-  dark: (0, _tokens.token)('color.background.default', _colors.DN30)
+  light: "var(--ds-surface, ".concat(_colors.N30, ")"),
+  dark: "var(--ds-surface, ".concat(_colors.DN30, ")")
 };
 exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
 var defaultBackgroundColorFocus = {
-  light: (0, _tokens.token)('color.background.default', _colors.N0),
-  dark: (0, _tokens.token)('color.background.default', _colors.DN10)
+  light: "var(--ds-surface, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
 }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
 
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
 var subtleHoverBackgroundColor = {
-  light: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30),
-  dark: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.DN30)
+  light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
+  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.DN30, ")")
 };
 exports.subtleHoverBackgroundColor = subtleHoverBackgroundColor;
 var placeholderTextColor = {
-  light: (0, _tokens.token)('color.text.lowEmphasis', _colors.N100),
-  dark: (0, _tokens.token)('color.text.lowEmphasis', _colors.DN200)
+  light: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(_colors.DN200, ")")
 };
 exports.placeholderTextColor = placeholderTextColor;
 var textColor = {
-  light: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
-  dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
+  light: "var(--ds-text, ".concat(_colors.N900, ")"),
+  dark: "var(--ds-text, ".concat(_colors.DN600, ")")
 };
 exports.textColor = textColor;
 var disabledTextColor = {
-  light: (0, _tokens.token)('color.text.disabled', _colors.N70),
-  dark: (0, _tokens.token)('color.text.disabled', _colors.DN90)
+  light: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
+  dark: "var(--ds-text-disabled, ".concat(_colors.DN90, ")")
 };
 exports.disabledTextColor = disabledTextColor;
 var transparent = {

package/dist/cjs/index.js

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "Theme", {
   enumerable: true,
   get: function get() {
-    return _textArea.default;
+    return _theme.Theme;
   }
 });
-Object.defineProperty(exports, "Theme", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _theme.Theme;
+    return _textArea.default;
   }
 });
 Object.defineProperty(exports, "themeTokens", {

package/dist/cjs/styles.js

@@ -11,9 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _constants = require("@atlaskit/theme/constants");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 grid = (0, _constants.gridSize)();
 var borderRadius = 3;

package/dist/cjs/text-area.js

@@ -29,16 +29,18 @@ var _styles = require("./styles");
 
 var _theme = require("./theme");
 
+var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "theme", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "tokens", "value"];
+
 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 || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 packageName = "@atlaskit/textarea";
-var packageVersion = "4.2.3";
+var packageVersion = "4.3.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -46,6 +48,8 @@ var analyticsParams = {
 };
 
 var setSmartHeight = function setSmartHeight(el) {
+  // Always reset height to auto before calculating new height
+  el.style.height = 'auto';
   var borderHeight = _styles.borderWidth;
   var paddingBoxHeight = el.scrollHeight;
   var borderBoxHeight = paddingBoxHeight + borderHeight * 2;
@@ -80,14 +84,15 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       onFocus = props.onFocus,
       onChange = props.onChange,
       tokens = props.tokens,
-      rest = (0, _objectWithoutProperties2.default)(props, ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "theme", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "tokens"]);
+      value = props.value,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   (0, _react.useEffect)(function () {
     var el = ourRef.current;
 
     if (resize === 'smart' && el) {
       setSmartHeight(el);
     }
-  }, [resize]);
+  }, [resize, value]);
   var onBlurWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
     fn: function fn(event) {
       onBlur && onBlur(event);
@@ -118,7 +123,6 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     var el = ourRef.current;
 
     if (resize === 'smart' && el) {
-      el.style.height = 'auto';
       setSmartHeight(el);
     }
 
@@ -141,6 +145,7 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   var textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
   (0, _styles.themeStyles)(tokens)];
   return (0, _core.jsx)("textarea", (0, _extends2.default)({}, controlProps, {
+    value: value,
     disabled: isDisabled,
     readOnly: isReadOnly,
     required: isRequired,

package/dist/cjs/theme.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Theme = exports.themeTokens = void 0;
+exports.themeTokens = exports.Theme = void 0;
 
 var _components = require("@atlaskit/theme/components");
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.2.3",
+	"version": "4.3.0",
 	"sideEffects": false
 }

package/dist/es2019/component-tokens.js

@@ -1,53 +1,52 @@
 import { B100, B75, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const disabledBackground = {
-  light: token('color.background.disabled', N20),
-  dark: token('color.background.disabled', DN20)
+  light: `var(--ds-background-disabled, ${N20})`,
+  dark: `var(--ds-background-disabled, ${DN20})`
 };
 export const disabledBorder = {
-  light: token('color.background.disabled', N40),
-  dark: token('color.background.disabled', DN40)
+  light: `var(--ds-background-disabled, ${N40})`,
+  dark: `var(--ds-background-disabled, ${DN40})`
 };
 export const invalidBorderColor = {
-  light: token('color.iconBorder.danger', R400),
-  dark: token('color.iconBorder.danger', R400)
+  light: `var(--ds-border-danger, ${R400})`,
+  dark: `var(--ds-border-danger, ${R400})`
 };
 export const defaultBorderColor = {
-  light: token('color.border.neutral', N40),
-  dark: token('color.border.neutral', DN40)
+  light: `var(--ds-border, ${N40})`,
+  dark: `var(--ds-border, ${DN40})`
 };
 export const defaultBorderColorFocus = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: `var(--ds-border-focused, ${B100})`,
+  dark: `var(--ds-border-focused, ${B75})`
 };
 export const defaultBackgroundColor = {
-  light: token('color.background.subtleNeutral.resting', N10),
-  dark: token('color.background.subtleNeutral.resting', DN10)
+  light: `var(--ds-background-neutral, ${N10})`,
+  dark: `var(--ds-background-neutral, ${DN10})`
 };
 export const defaultBackgroundColorHover = {
-  light: token('color.background.default', N30),
-  dark: token('color.background.default', DN30)
+  light: `var(--ds-surface, ${N30})`,
+  dark: `var(--ds-surface, ${DN30})`
 };
 export const defaultBackgroundColorFocus = {
-  light: token('color.background.default', N0),
-  dark: token('color.background.default', DN10)
+  light: `var(--ds-surface, ${N0})`,
+  dark: `var(--ds-surface, ${DN10})`
 }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
 
 export const subtleHoverBackgroundColor = {
-  light: token('color.background.transparentNeutral.hover', N30),
-  dark: token('color.background.transparentNeutral.hover', DN30)
+  light: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
+  dark: `var(--ds-background-neutral-subtle-hovered, ${DN30})`
 };
 export const placeholderTextColor = {
-  light: token('color.text.lowEmphasis', N100),
-  dark: token('color.text.lowEmphasis', DN200)
+  light: `var(--ds-text-subtlest, ${N100})`,
+  dark: `var(--ds-text-subtlest, ${DN200})`
 };
 export const textColor = {
-  light: token('color.text.highEmphasis', N900),
-  dark: token('color.text.highEmphasis', DN600)
+  light: `var(--ds-text, ${N900})`,
+  dark: `var(--ds-text, ${DN600})`
 };
 export const disabledTextColor = {
-  light: token('color.text.disabled', N70),
-  dark: token('color.text.disabled', DN90)
+  light: `var(--ds-text-disabled, ${N70})`,
+  dark: `var(--ds-text-disabled, ${DN90})`
 };
 export const transparent = {
   light: 'transparent',

package/dist/es2019/text-area.js

@@ -8,7 +8,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "4.2.3";
+const packageVersion = "4.3.0";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,
@@ -16,6 +16,8 @@ const analyticsParams = {
 };
 
 const setSmartHeight = el => {
+  // Always reset height to auto before calculating new height
+  el.style.height = 'auto';
   const borderHeight = borderWidth;
   const paddingBoxHeight = el.scrollHeight;
   const borderBoxHeight = paddingBoxHeight + borderHeight * 2;
@@ -41,6 +43,7 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     onFocus,
     onChange,
     tokens,
+    value,
     ...rest
   } = props;
   useEffect(() => {
@@ -49,7 +52,7 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     if (resize === 'smart' && el) {
       setSmartHeight(el);
     }
-  }, [resize]);
+  }, [resize, value]);
   const onBlurWithAnalytics = usePlatformLeafEventHandler({
     fn: event => {
       onBlur && onBlur(event);
@@ -82,7 +85,6 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     const el = ourRef.current;
 
     if (resize === 'smart' && el) {
-      el.style.height = 'auto';
       setSmartHeight(el);
     }
 
@@ -103,6 +105,7 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
   const textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
   themeStyles(tokens)];
   return jsx("textarea", _extends({}, controlProps, {
+    value: value,
     disabled: isDisabled,
     readOnly: isReadOnly,
     required: isRequired,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.2.3",
+	"version": "4.3.0",
 	"sideEffects": false
 }

package/dist/esm/component-tokens.js

@@ -1,53 +1,52 @@
 import { B100, B75, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var disabledBackground = {
-  light: token('color.background.disabled', N20),
-  dark: token('color.background.disabled', DN20)
+  light: "var(--ds-background-disabled, ".concat(N20, ")"),
+  dark: "var(--ds-background-disabled, ".concat(DN20, ")")
 };
 export var disabledBorder = {
-  light: token('color.background.disabled', N40),
-  dark: token('color.background.disabled', DN40)
+  light: "var(--ds-background-disabled, ".concat(N40, ")"),
+  dark: "var(--ds-background-disabled, ".concat(DN40, ")")
 };
 export var invalidBorderColor = {
-  light: token('color.iconBorder.danger', R400),
-  dark: token('color.iconBorder.danger', R400)
+  light: "var(--ds-border-danger, ".concat(R400, ")"),
+  dark: "var(--ds-border-danger, ".concat(R400, ")")
 };
 export var defaultBorderColor = {
-  light: token('color.border.neutral', N40),
-  dark: token('color.border.neutral', DN40)
+  light: "var(--ds-border, ".concat(N40, ")"),
+  dark: "var(--ds-border, ".concat(DN40, ")")
 };
 export var defaultBorderColorFocus = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: "var(--ds-border-focused, ".concat(B100, ")"),
+  dark: "var(--ds-border-focused, ".concat(B75, ")")
 };
 export var defaultBackgroundColor = {
-  light: token('color.background.subtleNeutral.resting', N10),
-  dark: token('color.background.subtleNeutral.resting', DN10)
+  light: "var(--ds-background-neutral, ".concat(N10, ")"),
+  dark: "var(--ds-background-neutral, ".concat(DN10, ")")
 };
 export var defaultBackgroundColorHover = {
-  light: token('color.background.default', N30),
-  dark: token('color.background.default', DN30)
+  light: "var(--ds-surface, ".concat(N30, ")"),
+  dark: "var(--ds-surface, ".concat(DN30, ")")
 };
 export var defaultBackgroundColorFocus = {
-  light: token('color.background.default', N0),
-  dark: token('color.background.default', DN10)
+  light: "var(--ds-surface, ".concat(N0, ")"),
+  dark: "var(--ds-surface, ".concat(DN10, ")")
 }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
 
 export var subtleHoverBackgroundColor = {
-  light: token('color.background.transparentNeutral.hover', N30),
-  dark: token('color.background.transparentNeutral.hover', DN30)
+  light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
+  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(DN30, ")")
 };
 export var placeholderTextColor = {
-  light: token('color.text.lowEmphasis', N100),
-  dark: token('color.text.lowEmphasis', DN200)
+  light: "var(--ds-text-subtlest, ".concat(N100, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(DN200, ")")
 };
 export var textColor = {
-  light: token('color.text.highEmphasis', N900),
-  dark: token('color.text.highEmphasis', DN600)
+  light: "var(--ds-text, ".concat(N900, ")"),
+  dark: "var(--ds-text, ".concat(DN600, ")")
 };
 export var disabledTextColor = {
-  light: token('color.text.disabled', N70),
-  dark: token('color.text.disabled', DN90)
+  light: "var(--ds-text-disabled, ".concat(N70, ")"),
+  dark: "var(--ds-text-disabled, ".concat(DN90, ")")
 };
 export var transparent = {
   light: 'transparent',

package/dist/esm/styles.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
 import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize, gridSize } from '@atlaskit/theme/constants';

package/dist/esm/text-area.js

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "theme", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "tokens", "value"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
@@ -15,7 +16,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.2.3";
+var packageVersion = "4.3.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -23,6 +24,8 @@ var analyticsParams = {
 };
 
 var setSmartHeight = function setSmartHeight(el) {
+  // Always reset height to auto before calculating new height
+  el.style.height = 'auto';
   var borderHeight = borderWidth;
   var paddingBoxHeight = el.scrollHeight;
   var borderBoxHeight = paddingBoxHeight + borderHeight * 2;
@@ -58,7 +61,8 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
       onFocus = props.onFocus,
       onChange = props.onChange,
       tokens = props.tokens,
-      rest = _objectWithoutProperties(props, ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "theme", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "tokens"]);
+      value = props.value,
+      rest = _objectWithoutProperties(props, _excluded);
 
   useEffect(function () {
     var el = ourRef.current;
@@ -66,7 +70,7 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
     if (resize === 'smart' && el) {
       setSmartHeight(el);
     }
-  }, [resize]);
+  }, [resize, value]);
   var onBlurWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
     fn: function fn(event) {
       onBlur && onBlur(event);
@@ -97,7 +101,6 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
     var el = ourRef.current;
 
     if (resize === 'smart' && el) {
-      el.style.height = 'auto';
       setSmartHeight(el);
     }
 
@@ -120,6 +123,7 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
   var textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
   themeStyles(tokens)];
   return jsx("textarea", _extends({}, controlProps, {
+    value: value,
     disabled: isDisabled,
     readOnly: isReadOnly,
     required: isRequired,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.2.3",
+	"version": "4.3.0",
 	"sideEffects": false
 }

package/dist/types/component-tokens.d.ts

@@ -7,40 +7,40 @@ export declare const disabledBorder: {
     dark: "var(--ds-background-disabled)";
 };
 export declare const invalidBorderColor: {
-    light: "var(--ds-iconBorder-danger)";
-    dark: "var(--ds-iconBorder-danger)";
+    light: "var(--ds-border-danger)";
+    dark: "var(--ds-border-danger)";
 };
 export declare const defaultBorderColor: {
-    light: "var(--ds-border-neutral)";
-    dark: "var(--ds-border-neutral)";
+    light: "var(--ds-border)";
+    dark: "var(--ds-border)";
 };
 export declare const defaultBorderColorFocus: {
-    light: "var(--ds-border-focus)";
-    dark: "var(--ds-border-focus)";
+    light: "var(--ds-border-focused)";
+    dark: "var(--ds-border-focused)";
 };
 export declare const defaultBackgroundColor: {
-    light: "var(--ds-background-subtleNeutral-resting)";
-    dark: "var(--ds-background-subtleNeutral-resting)";
+    light: "var(--ds-background-neutral)";
+    dark: "var(--ds-background-neutral)";
 };
 export declare const defaultBackgroundColorHover: {
-    light: "var(--ds-background-default)";
-    dark: "var(--ds-background-default)";
+    light: "var(--ds-surface)";
+    dark: "var(--ds-surface)";
 };
 export declare const defaultBackgroundColorFocus: {
-    light: "var(--ds-background-default)";
-    dark: "var(--ds-background-default)";
+    light: "var(--ds-surface)";
+    dark: "var(--ds-surface)";
 };
 export declare const subtleHoverBackgroundColor: {
-    light: "var(--ds-background-transparentNeutral-hover)";
-    dark: "var(--ds-background-transparentNeutral-hover)";
+    light: "var(--ds-background-neutral-subtle-hovered)";
+    dark: "var(--ds-background-neutral-subtle-hovered)";
 };
 export declare const placeholderTextColor: {
-    light: "var(--ds-text-lowEmphasis)";
-    dark: "var(--ds-text-lowEmphasis)";
+    light: "var(--ds-text-subtlest)";
+    dark: "var(--ds-text-subtlest)";
 };
 export declare const textColor: {
-    light: "var(--ds-text-highEmphasis)";
-    dark: "var(--ds-text-highEmphasis)";
+    light: "var(--ds-text)";
+    dark: "var(--ds-text)";
 };
 export declare const disabledTextColor: {
     light: "var(--ds-text-disabled)";

package/dist/types/text-area.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-export interface Props extends WithAnalyticsEventsProps {
+export interface OwnProps extends WithAnalyticsEventsProps {
     /**
      * controls the appearance of the field.
      * subtle shows styling on hover.
@@ -61,5 +61,7 @@ export interface Props extends WithAnalyticsEventsProps {
      * serving as a hook for automated tests */
     testId?: string;
 }
-declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Props, "appearance" | "maxHeight" | "resize" | "minimumRows" | "isMonospaced" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "spellCheck" | "theme" | "testId" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
+declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export declare type Props = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'required' | 'readonly'>, OwnProps>;
+declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Combine<Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "color" | "hidden" | "style" | "wrap" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "rows" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, OwnProps>, "appearance" | "color" | "maxHeight" | "resize" | "hidden" | "style" | "wrap" | "minimumRows" | "isMonospaced" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "rows" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "theme" | "testId" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
 export default TextArea;

package/dist/types/theme.d.ts

@@ -31,8 +31,8 @@ export declare type ThemeTokens = {
 export declare const themeTokens: {
     borderColor: {
         standard: {
-            light: "var(--ds-border-neutral)";
-            dark: "var(--ds-border-neutral)";
+            light: "var(--ds-border)";
+            dark: "var(--ds-border)";
         };
         subtle: {
             light: string;
@@ -45,12 +45,12 @@ export declare const themeTokens: {
     };
     borderColorFocus: {
         standard: {
-            light: "var(--ds-border-focus)";
-            dark: "var(--ds-border-focus)";
+            light: "var(--ds-border-focused)";
+            dark: "var(--ds-border-focused)";
         };
         subtle: {
-            light: "var(--ds-border-focus)";
-            dark: "var(--ds-border-focus)";
+            light: "var(--ds-border-focused)";
+            dark: "var(--ds-border-focused)";
         };
         none: {
             light: string;
@@ -59,8 +59,8 @@ export declare const themeTokens: {
     };
     backgroundColor: {
         standard: {
-            light: "var(--ds-background-subtleNeutral-resting)";
-            dark: "var(--ds-background-subtleNeutral-resting)";
+            light: "var(--ds-background-neutral)";
+            dark: "var(--ds-background-neutral)";
         };
         subtle: {
             light: string;
@@ -73,12 +73,12 @@ export declare const themeTokens: {
     };
     backgroundColorFocus: {
         standard: {
-            light: "var(--ds-background-default)";
-            dark: "var(--ds-background-default)";
+            light: "var(--ds-surface)";
+            dark: "var(--ds-surface)";
         };
         subtle: {
-            light: "var(--ds-background-default)";
-            dark: "var(--ds-background-default)";
+            light: "var(--ds-surface)";
+            dark: "var(--ds-surface)";
         };
         none: {
             light: string;
@@ -87,12 +87,12 @@ export declare const themeTokens: {
     };
     backgroundColorHover: {
         standard: {
-            light: "var(--ds-background-default)";
-            dark: "var(--ds-background-default)";
+            light: "var(--ds-surface)";
+            dark: "var(--ds-surface)";
         };
         subtle: {
-            light: "var(--ds-background-transparentNeutral-hover)";
-            dark: "var(--ds-background-transparentNeutral-hover)";
+            light: "var(--ds-background-neutral-subtle-hovered)";
+            dark: "var(--ds-background-neutral-subtle-hovered)";
         };
         none: {
             light: string;
@@ -105,7 +105,7 @@ export declare const themeTokens: {
             backgroundColorFocus: "var(--ds-background-disabled)";
             backgroundColorHover: "var(--ds-background-disabled)";
             borderColor: "var(--ds-background-disabled)";
-            borderColorFocus: "var(--ds-border-focus)";
+            borderColorFocus: "var(--ds-border-focused)";
             textColor: "var(--ds-text-disabled)";
         };
         dark: {
@@ -113,33 +113,33 @@ export declare const themeTokens: {
             backgroundColorFocus: "var(--ds-background-disabled)";
             backgroundColorHover: "var(--ds-background-disabled)";
             borderColor: "var(--ds-background-disabled)";
-            borderColorFocus: "var(--ds-border-focus)";
+            borderColorFocus: "var(--ds-border-focused)";
             textColor: "var(--ds-text-disabled)";
         };
     };
     invalidRules: {
         light: {
-            borderColor: "var(--ds-iconBorder-danger)";
-            borderColorFocus: "var(--ds-border-focus)";
-            backgroundColor: "var(--ds-background-subtleNeutral-resting)";
-            backgroundColorFocus: "var(--ds-background-default)";
-            backgroundColorHover: "var(--ds-background-default)";
+            borderColor: "var(--ds-border-danger)";
+            borderColorFocus: "var(--ds-border-focused)";
+            backgroundColor: "var(--ds-background-neutral)";
+            backgroundColorFocus: "var(--ds-surface)";
+            backgroundColorHover: "var(--ds-surface)";
         };
         dark: {
-            borderColor: "var(--ds-iconBorder-danger)";
-            borderColorFocus: "var(--ds-border-focus)";
-            backgroundColor: "var(--ds-background-subtleNeutral-resting)";
-            backgroundColorFocus: "var(--ds-background-default)";
-            backgroundColorHover: "var(--ds-background-default)";
+            borderColor: "var(--ds-border-danger)";
+            borderColorFocus: "var(--ds-border-focused)";
+            backgroundColor: "var(--ds-background-neutral)";
+            backgroundColorFocus: "var(--ds-surface)";
+            backgroundColorHover: "var(--ds-surface)";
         };
     };
     textColor: {
-        light: "var(--ds-text-highEmphasis)";
-        dark: "var(--ds-text-highEmphasis)";
+        light: "var(--ds-text)";
+        dark: "var(--ds-text)";
     };
     placeholderTextColor: {
-        light: "var(--ds-text-lowEmphasis)";
-        dark: "var(--ds-text-lowEmphasis)";
+        light: "var(--ds-text-subtlest)";
+        dark: "var(--ds-text-subtlest)";
     };
 };
 export declare const Theme: {

package/extract-react-types/textarea-props.tsx

@@ -0,0 +1,5 @@
+import type { OwnProps as Props } from '../src/text-area';
+
+export default function TextareaProps(props: Props) {
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,7 +18,6 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Text area"
@@ -26,8 +25,8 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -35,10 +34,9 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/form": "^8.4.0",
+    "@atlaskit/form": "^8.5.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -65,7 +63,10 @@
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "deprecation": "no-deprecated-imports"
     }
   },