@atlaskit/textarea 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/textarea
 
+## 4.5.0
+
+### Minor Changes
+
+- [`6612a236510`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6612a236510) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- [`32d761cfc1d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/32d761cfc1d) - [ux] Fix bug that prevented consumers from rendering a single line textarea
+
 ## 4.4.0
 
 ### Minor Changes

package/dist/cjs/styles.js

@@ -9,6 +9,8 @@ exports.themeStyles = exports.getBaseStyles = exports.borderWidth = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _react = require("@emotion/react");
+
 var _constants = require("@atlaskit/theme/constants");
 
 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; }
@@ -46,7 +48,7 @@ var borderBoxMinHeightCompact = function borderBoxMinHeightCompact(minimumRows,
 };
 
 var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance) {
-  return _objectSpread({
+  return (0, _react.css)(_objectSpread({
     '&:focus': {
       backgroundColor: props.backgroundColorFocus,
       borderColor: props.borderColorFocus
@@ -55,10 +57,12 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
       backgroundColor: props.backgroundColor,
       borderColor: props.borderColor
     },
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-invalid]:focus': {
       backgroundColor: props.invalidRules.backgroundColorFocus,
       borderColor: props.invalidRules.borderColorFocus
     },
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-invalid]:not(:focus)': {
       backgroundColor: props.invalidRules.backgroundColor,
       borderColor: props.invalidRules.borderColor
@@ -72,96 +76,98 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
       backgroundColor: props.disabledRules.backgroundColor,
       borderColor: props.disabledRules.borderColor
     }
-  } : {});
+  } : {}));
 };
 
 var placeholderStyle = function placeholderStyle(placeholderTextColor) {
-  return {
+  return (0, _react.css)({
     '&::placeholder': {
       color: placeholderTextColor
     }
-  };
+  });
 };
 
 var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
-  return {
+  return (0, _react.css)({
     '&:hover:not(:read-only):not(:focus)': {
       backgroundColor: props.backgroundColorHover,
       borderColor: props.borderColorHover,
       '&:disabled': {
         backgroundColor: props.disabledRules.backgroundColorHover
       },
+      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
       '&[data-invalid]': {
         backgroundColor: props.invalidRules.backgroundColorHover
       }
     }
-  };
+  });
 };
 
 var resizeStyle = function resizeStyle(resize) {
   if (resize === 'horizontal' || resize === 'vertical') {
-    return {
+    return (0, _react.css)({
       resize: resize
-    };
+    });
   }
 
   if (resize === 'auto') {
-    return {
+    return (0, _react.css)({
       resize: 'both'
-    };
+    });
   }
 
-  return {
+  return (0, _react.css)({
     resize: 'none'
-  };
+  });
 };
 
 var borderStyle = function borderStyle(appearance) {
-  return {
+  return (0, _react.css)({
     borderStyle: appearance === 'none' ? 'none' : 'solid'
-  };
+  });
 };
 
 var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
-  return {
+  return (0, _react.css)({
     fontFamily: isMonospaced ? codeFontFamily : fontFamily
-  };
+  });
 };
 
 var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
   var minimumRows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
   var horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
   var borderHeight = borderWidth;
-  return {
+  return (0, _react.css)({
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-compact]': {
+      minHeight: borderBoxMinHeightCompact(minimumRows, borderHeight),
       padding: "".concat(compactVerticalPadding, "px ").concat(horizontalPaddingWithoutBorderWidth, "px"),
-      lineHeight: lineHeightCompact / fontSize,
-      minHeight: borderBoxMinHeightCompact(minimumRows, borderHeight)
+      lineHeight: lineHeightCompact / fontSize
     },
     '&:not([data-compact])': {
+      minHeight: borderBoxMinHeight(minimumRows, borderHeight),
       padding: "".concat(verticalPadding, "px ").concat(horizontalPaddingWithoutBorderWidth, "px"),
-      lineHeight: lineHeightBase / fontSize,
-      minHeight: borderBoxMinHeight(minimumRows, borderHeight)
+      lineHeight: lineHeightBase / fontSize
     }
-  };
+  });
 };
 
-var staticStyles = {
-  flex: '1 1 100%',
-  position: 'relative',
-  borderRadius: borderRadius,
+var staticStyles = (0, _react.css)({
+  display: 'block',
   boxSizing: 'border-box',
-  overflow: 'auto',
-  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n               border-color ").concat(transitionDuration, " ease-in-out"),
-  wordWrap: 'break-word',
-  fontSize: fontSize,
-  borderWidth: borderWidth,
+  width: '100%',
+  minWidth: 0,
   maxWidth: '100%',
-  display: 'block',
   margin: 0,
-  minWidth: 0,
+  position: 'relative',
+  flex: '1 1 100%',
+  borderRadius: borderRadius,
+  borderWidth: borderWidth,
+  fontSize: fontSize,
   outline: 'none',
-  width: '100%',
+  overflow: 'auto',
+  transition: "background-color ".concat(transitionDuration, " ease-in-out, \n               border-color ").concat(transitionDuration, " ease-in-out"),
+  wordWrap: 'break-word',
   '&:disabled': _objectSpread({
     cursor: 'not-allowed'
   }, overrideSafariDisabledStyles),
@@ -171,7 +177,7 @@ var staticStyles = {
   '&:invalid': {
     boxShadow: 'none'
   }
-};
+});
 
 var getBaseStyles = function getBaseStyles(_ref) {
   var minimumRows = _ref.minimumRows,
@@ -179,20 +185,24 @@ var getBaseStyles = function getBaseStyles(_ref) {
       appearance = _ref.appearance,
       isMonospaced = _ref.isMonospaced,
       maxHeight = _ref.maxHeight;
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, staticStyles), borderPaddingAndHeightStyles(minimumRows)), resizeStyle(resize)), borderStyle(appearance)), fontFamilyStyle(isMonospaced)), {}, {
-    maxHeight: maxHeight
-  });
+  return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
+    (0, _react.css)([staticStyles, borderPaddingAndHeightStyles(minimumRows), resizeStyle(resize), borderStyle(appearance), fontFamilyStyle(isMonospaced), {
+      maxHeight: maxHeight
+    }])
+  );
 };
 
 exports.getBaseStyles = getBaseStyles;
 
 var themeStyles = function themeStyles(props, appearance) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props, appearance)), hoverBackgroundAndBorderStyles(props)), placeholderStyle(props.placeholderTextColor)), {}, {
-    color: props.textColor,
-    '&:disabled': {
-      color: props.disabledRules.textColor
-    }
-  });
+  return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
+    (0, _react.css)([bgAndBorderColorStyles(props, appearance), hoverBackgroundAndBorderStyles(props), placeholderStyle(props.placeholderTextColor), {
+      color: props.textColor,
+      '&:disabled': {
+        color: props.disabledRules.textColor
+      }
+    }])
+  );
 };
 
 exports.themeStyles = themeStyles;

package/dist/cjs/text-area.js

@@ -19,11 +19,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+var _components = require("@atlaskit/theme/components");
 
 var _styles = require("./styles");
 
@@ -40,7 +40,7 @@ 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 packageName = "@atlaskit/textarea";
-var packageVersion = "4.4.0";
+var packageVersion = "4.5.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -75,7 +75,7 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       _props$isMonospaced = props.isMonospaced,
       isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
       _props$minimumRows = props.minimumRows,
-      minimumRows = _props$minimumRows === void 0 ? 1 : _props$minimumRows,
+      minimumRows = _props$minimumRows === void 0 ? 2 : _props$minimumRows,
       theme = props.theme,
       testId = props.testId,
       _props$maxHeight = props.maxHeight,
@@ -142,9 +142,9 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       maxHeight: maxHeight
     });
   }, [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-  var textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
-  (0, _styles.themeStyles)(tokens, appearance)];
-  return (0, _core.jsx)("textarea", (0, _extends2.default)({}, controlProps, {
+  var textAreaStyles = (0, _react2.css)([baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
+  (0, _styles.themeStyles)(tokens, appearance)]);
+  return (0, _react2.jsx)("textarea", (0, _extends2.default)({}, controlProps, {
     value: value,
     disabled: isDisabled,
     readOnly: isReadOnly,
@@ -152,7 +152,9 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     ref: getTextAreaRef,
     onChange: handleOnChange,
     onBlur: onBlurWithAnalytics,
-    onFocus: onFocusWithAnalytics // TODO refactor to follow emotion styling rules
+    onFocus: onFocusWithAnalytics,
+    rows: minimumRows // TODO refactor to follow emotion styling rules
+    // see: https://product-fabric.atlassian.net/browse/DSP-6060
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     ,
     css: textAreaStyles
@@ -169,21 +171,21 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
  */
 
 var TextArea = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function TextArea(props, ref) {
-  return (0, _core.jsx)(_components.default.Consumer, null, function (_ref) {
-    var mode = _ref.mode;
-    return (0, _core.jsx)(_theme.Theme.Provider, {
-      value: props.theme
-    }, (0, _core.jsx)(_theme.Theme.Consumer, {
-      appearance: props.appearance || 'standard',
-      mode: mode
-    }, function (tokens) {
-      return (0, _core.jsx)(TextAreaWithTokens, (0, _extends2.default)({
-        ref: ref
-      }, props, {
-        tokens: tokens
-      }));
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  return (0, _react2.jsx)(_theme.Theme.Provider, {
+    value: props.theme
+  }, (0, _react2.jsx)(_theme.Theme.Consumer, {
+    appearance: props.appearance || 'standard',
+    mode: mode
+  }, function (tokens) {
+    return (0, _react2.jsx)(TextAreaWithTokens, (0, _extends2.default)({
+      ref: ref
+    }, props, {
+      tokens: tokens
     }));
-  });
+  }));
 }));
 TextArea.displayName = 'TextArea';
 var _default = TextArea;

package/dist/cjs/version.json

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

package/dist/es2019/styles.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import { css } from '@emotion/react';
 import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize, gridSize } from '@atlaskit/theme/constants';
 const grid = gridSize();
 const borderRadius = 3;
@@ -29,7 +30,7 @@ const borderBoxMinHeightCompact = (minimumRows, borderHeight) => {
   return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
 };
 
-const bgAndBorderColorStyles = (props, appearance) => ({
+const bgAndBorderColorStyles = (props, appearance) => css({
   '&:focus': {
     backgroundColor: props.backgroundColorFocus,
     borderColor: props.borderColorFocus
@@ -38,10 +39,12 @@ const bgAndBorderColorStyles = (props, appearance) => ({
     backgroundColor: props.backgroundColor,
     borderColor: props.borderColor
   },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&[data-invalid]:focus': {
     backgroundColor: props.invalidRules.backgroundColorFocus,
     borderColor: props.invalidRules.borderColorFocus
   },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&[data-invalid]:not(:focus)': {
     backgroundColor: props.invalidRules.backgroundColor,
     borderColor: props.invalidRules.borderColor
@@ -60,87 +63,87 @@ const bgAndBorderColorStyles = (props, appearance) => ({
   } : {})
 });
 
-const placeholderStyle = placeholderTextColor => ({
+const placeholderStyle = placeholderTextColor => css({
   '&::placeholder': {
     color: placeholderTextColor
   }
 });
 
-const hoverBackgroundAndBorderStyles = props => {
-  return {
-    '&:hover:not(:read-only):not(:focus)': {
-      backgroundColor: props.backgroundColorHover,
-      borderColor: props.borderColorHover,
-      '&:disabled': {
-        backgroundColor: props.disabledRules.backgroundColorHover
-      },
-      '&[data-invalid]': {
-        backgroundColor: props.invalidRules.backgroundColorHover
-      }
+const hoverBackgroundAndBorderStyles = props => css({
+  '&:hover:not(:read-only):not(:focus)': {
+    backgroundColor: props.backgroundColorHover,
+    borderColor: props.borderColorHover,
+    '&:disabled': {
+      backgroundColor: props.disabledRules.backgroundColorHover
+    },
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '&[data-invalid]': {
+      backgroundColor: props.invalidRules.backgroundColorHover
     }
-  };
-};
+  }
+});
 
 const resizeStyle = resize => {
   if (resize === 'horizontal' || resize === 'vertical') {
-    return {
+    return css({
       resize
-    };
+    });
   }
 
   if (resize === 'auto') {
-    return {
+    return css({
       resize: 'both'
-    };
+    });
   }
 
-  return {
+  return css({
     resize: 'none'
-  };
+  });
 };
 
-const borderStyle = appearance => ({
+const borderStyle = appearance => css({
   borderStyle: appearance === 'none' ? 'none' : 'solid'
 });
 
-const fontFamilyStyle = isMonospaced => ({
+const fontFamilyStyle = isMonospaced => css({
   fontFamily: isMonospaced ? codeFontFamily : fontFamily
 });
 
 const borderPaddingAndHeightStyles = (minimumRows = 1) => {
   const horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
   const borderHeight = borderWidth;
-  return {
+  return css({
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-compact]': {
+      minHeight: borderBoxMinHeightCompact(minimumRows, borderHeight),
       padding: `${compactVerticalPadding}px ${horizontalPaddingWithoutBorderWidth}px`,
-      lineHeight: lineHeightCompact / fontSize,
-      minHeight: borderBoxMinHeightCompact(minimumRows, borderHeight)
+      lineHeight: lineHeightCompact / fontSize
     },
     '&:not([data-compact])': {
+      minHeight: borderBoxMinHeight(minimumRows, borderHeight),
       padding: `${verticalPadding}px ${horizontalPaddingWithoutBorderWidth}px`,
-      lineHeight: lineHeightBase / fontSize,
-      minHeight: borderBoxMinHeight(minimumRows, borderHeight)
+      lineHeight: lineHeightBase / fontSize
     }
-  };
+  });
 };
 
-const staticStyles = {
-  flex: '1 1 100%',
+const staticStyles = css({
+  display: 'block',
+  boxSizing: 'border-box',
+  width: '100%',
+  minWidth: 0,
+  maxWidth: '100%',
+  margin: 0,
   position: 'relative',
+  flex: '1 1 100%',
   borderRadius: borderRadius,
-  boxSizing: 'border-box',
+  borderWidth: borderWidth,
+  fontSize: fontSize,
+  outline: 'none',
   overflow: 'auto',
-  transition: `background-color ${transitionDuration} ease-in-out,
+  transition: `background-color ${transitionDuration} ease-in-out, 
                border-color ${transitionDuration} ease-in-out`,
   wordWrap: 'break-word',
-  fontSize,
-  borderWidth: borderWidth,
-  maxWidth: '100%',
-  display: 'block',
-  margin: 0,
-  minWidth: 0,
-  outline: 'none',
-  width: '100%',
   '&:disabled': {
     cursor: 'not-allowed',
     ...overrideSafariDisabledStyles
@@ -151,27 +154,21 @@ const staticStyles = {
   '&:invalid': {
     boxShadow: 'none'
   }
-};
+});
 export const getBaseStyles = ({
   minimumRows,
   resize,
   appearance,
   isMonospaced,
   maxHeight
-}) => ({ ...staticStyles,
-  ...borderPaddingAndHeightStyles(minimumRows),
-  ...resizeStyle(resize),
-  ...borderStyle(appearance),
-  ...fontFamilyStyle(isMonospaced),
+}) => // eslint-disable-next-line @repo/internal/styles/no-exported-styles
+css([staticStyles, borderPaddingAndHeightStyles(minimumRows), resizeStyle(resize), borderStyle(appearance), fontFamilyStyle(isMonospaced), {
   maxHeight
-});
-export const themeStyles = (props, appearance) => {
-  return { ...bgAndBorderColorStyles(props, appearance),
-    ...hoverBackgroundAndBorderStyles(props),
-    ...placeholderStyle(props.placeholderTextColor),
-    color: props.textColor,
-    '&:disabled': {
-      color: props.disabledRules.textColor
-    }
-  };
-};
+}]);
+export const themeStyles = (props, appearance) => // eslint-disable-next-line @repo/internal/styles/no-exported-styles
+css([bgAndBorderColorStyles(props, appearance), hoverBackgroundAndBorderStyles(props), placeholderStyle(props.placeholderTextColor), {
+  color: props.textColor,
+  '&:disabled': {
+    color: props.disabledRules.textColor
+  }
+}]);

package/dist/es2019/text-area.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "4.4.0";
+const packageVersion = "4.5.0";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,
@@ -35,7 +35,7 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     isDisabled = false,
     isInvalid = false,
     isMonospaced = false,
-    minimumRows = 1,
+    minimumRows = 2,
     theme,
     testId,
     maxHeight = '50vh',
@@ -102,8 +102,8 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     isMonospaced,
     maxHeight
   }), [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-  const textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
-  themeStyles(tokens, appearance)];
+  const textAreaStyles = css([baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
+  themeStyles(tokens, appearance)]);
   return jsx("textarea", _extends({}, controlProps, {
     value: value,
     disabled: isDisabled,
@@ -112,7 +112,9 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     ref: getTextAreaRef,
     onChange: handleOnChange,
     onBlur: onBlurWithAnalytics,
-    onFocus: onFocusWithAnalytics // TODO refactor to follow emotion styling rules
+    onFocus: onFocusWithAnalytics,
+    rows: minimumRows // TODO refactor to follow emotion styling rules
+    // see: https://product-fabric.atlassian.net/browse/DSP-6060
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     ,
     css: textAreaStyles
@@ -129,9 +131,10 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
  */
 
 const TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, ({
+  const {
     mode
-  }) => jsx(Theme.Provider, {
+  } = useGlobalTheme();
+  return jsx(Theme.Provider, {
     value: props.theme
   }, jsx(Theme.Consumer, {
     appearance: props.appearance || 'standard',
@@ -140,7 +143,7 @@ const TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(pr
     ref: ref
   }, props, {
     tokens: tokens
-  })))));
+  }))));
 }));
 TextArea.displayName = 'TextArea';
 export default TextArea;

package/dist/es2019/version.json

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

package/dist/esm/styles.js

@@ -5,6 +5,7 @@ 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) { _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 { css } from '@emotion/react';
 import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize, gridSize } from '@atlaskit/theme/constants';
 var grid = gridSize();
 var borderRadius = 3;
@@ -36,7 +37,7 @@ var borderBoxMinHeightCompact = function borderBoxMinHeightCompact(minimumRows,
 };
 
 var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance) {
-  return _objectSpread({
+  return css(_objectSpread({
     '&:focus': {
       backgroundColor: props.backgroundColorFocus,
       borderColor: props.borderColorFocus
@@ -45,10 +46,12 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
       backgroundColor: props.backgroundColor,
       borderColor: props.borderColor
     },
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-invalid]:focus': {
       backgroundColor: props.invalidRules.backgroundColorFocus,
       borderColor: props.invalidRules.borderColorFocus
     },
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-invalid]:not(:focus)': {
       backgroundColor: props.invalidRules.backgroundColor,
       borderColor: props.invalidRules.borderColor
@@ -62,96 +65,98 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
       backgroundColor: props.disabledRules.backgroundColor,
       borderColor: props.disabledRules.borderColor
     }
-  } : {});
+  } : {}));
 };
 
 var placeholderStyle = function placeholderStyle(placeholderTextColor) {
-  return {
+  return css({
     '&::placeholder': {
       color: placeholderTextColor
     }
-  };
+  });
 };
 
 var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
-  return {
+  return css({
     '&:hover:not(:read-only):not(:focus)': {
       backgroundColor: props.backgroundColorHover,
       borderColor: props.borderColorHover,
       '&:disabled': {
         backgroundColor: props.disabledRules.backgroundColorHover
       },
+      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
       '&[data-invalid]': {
         backgroundColor: props.invalidRules.backgroundColorHover
       }
     }
-  };
+  });
 };
 
 var resizeStyle = function resizeStyle(resize) {
   if (resize === 'horizontal' || resize === 'vertical') {
-    return {
+    return css({
       resize: resize
-    };
+    });
   }
 
   if (resize === 'auto') {
-    return {
+    return css({
       resize: 'both'
-    };
+    });
   }
 
-  return {
+  return css({
     resize: 'none'
-  };
+  });
 };
 
 var borderStyle = function borderStyle(appearance) {
-  return {
+  return css({
     borderStyle: appearance === 'none' ? 'none' : 'solid'
-  };
+  });
 };
 
 var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
-  return {
+  return css({
     fontFamily: isMonospaced ? codeFontFamily : fontFamily
-  };
+  });
 };
 
 var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
   var minimumRows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
   var horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
   var borderHeight = borderWidth;
-  return {
+  return css({
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-compact]': {
+      minHeight: borderBoxMinHeightCompact(minimumRows, borderHeight),
       padding: "".concat(compactVerticalPadding, "px ").concat(horizontalPaddingWithoutBorderWidth, "px"),
-      lineHeight: lineHeightCompact / fontSize,
-      minHeight: borderBoxMinHeightCompact(minimumRows, borderHeight)
+      lineHeight: lineHeightCompact / fontSize
     },
     '&:not([data-compact])': {
+      minHeight: borderBoxMinHeight(minimumRows, borderHeight),
       padding: "".concat(verticalPadding, "px ").concat(horizontalPaddingWithoutBorderWidth, "px"),
-      lineHeight: lineHeightBase / fontSize,
-      minHeight: borderBoxMinHeight(minimumRows, borderHeight)
+      lineHeight: lineHeightBase / fontSize
     }
-  };
+  });
 };
 
-var staticStyles = {
-  flex: '1 1 100%',
-  position: 'relative',
-  borderRadius: borderRadius,
+var staticStyles = css({
+  display: 'block',
   boxSizing: 'border-box',
-  overflow: 'auto',
-  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n               border-color ").concat(transitionDuration, " ease-in-out"),
-  wordWrap: 'break-word',
-  fontSize: fontSize,
-  borderWidth: borderWidth,
+  width: '100%',
+  minWidth: 0,
   maxWidth: '100%',
-  display: 'block',
   margin: 0,
-  minWidth: 0,
+  position: 'relative',
+  flex: '1 1 100%',
+  borderRadius: borderRadius,
+  borderWidth: borderWidth,
+  fontSize: fontSize,
   outline: 'none',
-  width: '100%',
+  overflow: 'auto',
+  transition: "background-color ".concat(transitionDuration, " ease-in-out, \n               border-color ").concat(transitionDuration, " ease-in-out"),
+  wordWrap: 'break-word',
   '&:disabled': _objectSpread({
     cursor: 'not-allowed'
   }, overrideSafariDisabledStyles),
@@ -161,22 +166,26 @@ var staticStyles = {
   '&:invalid': {
     boxShadow: 'none'
   }
-};
+});
 export var getBaseStyles = function getBaseStyles(_ref) {
   var minimumRows = _ref.minimumRows,
       resize = _ref.resize,
       appearance = _ref.appearance,
       isMonospaced = _ref.isMonospaced,
       maxHeight = _ref.maxHeight;
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, staticStyles), borderPaddingAndHeightStyles(minimumRows)), resizeStyle(resize)), borderStyle(appearance)), fontFamilyStyle(isMonospaced)), {}, {
-    maxHeight: maxHeight
-  });
+  return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
+    css([staticStyles, borderPaddingAndHeightStyles(minimumRows), resizeStyle(resize), borderStyle(appearance), fontFamilyStyle(isMonospaced), {
+      maxHeight: maxHeight
+    }])
+  );
 };
 export var themeStyles = function themeStyles(props, appearance) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props, appearance)), hoverBackgroundAndBorderStyles(props)), placeholderStyle(props.placeholderTextColor)), {}, {
-    color: props.textColor,
-    '&:disabled': {
-      color: props.disabledRules.textColor
-    }
-  });
+  return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
+    css([bgAndBorderColorStyles(props, appearance), hoverBackgroundAndBorderStyles(props), placeholderStyle(props.placeholderTextColor), {
+      color: props.textColor,
+      '&:disabled': {
+        color: props.disabledRules.textColor
+      }
+    }])
+  );
 };

package/dist/esm/text-area.js

@@ -10,13 +10,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.4.0";
+var packageVersion = "4.5.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -52,7 +52,7 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
       _props$isMonospaced = props.isMonospaced,
       isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
       _props$minimumRows = props.minimumRows,
-      minimumRows = _props$minimumRows === void 0 ? 1 : _props$minimumRows,
+      minimumRows = _props$minimumRows === void 0 ? 2 : _props$minimumRows,
       theme = props.theme,
       testId = props.testId,
       _props$maxHeight = props.maxHeight,
@@ -120,8 +120,8 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
       maxHeight: maxHeight
     });
   }, [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-  var textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
-  themeStyles(tokens, appearance)];
+  var textAreaStyles = css([baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
+  themeStyles(tokens, appearance)]);
   return jsx("textarea", _extends({}, controlProps, {
     value: value,
     disabled: isDisabled,
@@ -130,7 +130,9 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: getTextAreaRef,
     onChange: handleOnChange,
     onBlur: onBlurWithAnalytics,
-    onFocus: onFocusWithAnalytics // TODO refactor to follow emotion styling rules
+    onFocus: onFocusWithAnalytics,
+    rows: minimumRows // TODO refactor to follow emotion styling rules
+    // see: https://product-fabric.atlassian.net/browse/DSP-6060
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     ,
     css: textAreaStyles
@@ -147,21 +149,21 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
  */
 
 var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, function (_ref) {
-    var mode = _ref.mode;
-    return jsx(Theme.Provider, {
-      value: props.theme
-    }, jsx(Theme.Consumer, {
-      appearance: props.appearance || 'standard',
-      mode: mode
-    }, function (tokens) {
-      return jsx(TextAreaWithTokens, _extends({
-        ref: ref
-      }, props, {
-        tokens: tokens
-      }));
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  return jsx(Theme.Provider, {
+    value: props.theme
+  }, jsx(Theme.Consumer, {
+    appearance: props.appearance || 'standard',
+    mode: mode
+  }, function (tokens) {
+    return jsx(TextAreaWithTokens, _extends({
+      ref: ref
+    }, props, {
+      tokens: tokens
     }));
-  });
+  }));
 }));
 TextArea.displayName = 'TextArea';
 export default TextArea;

package/dist/esm/version.json

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

package/dist/types/styles.d.ts

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { CSSObject } from '@emotion/core';
 import { ThemeTokens } from './theme';
 import { TextAreaProps } from './types';
 export interface StyleProps {
@@ -10,5 +8,5 @@ export interface StyleProps {
     maxHeight: string;
 }
 export declare const borderWidth = 2;
-export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => CSSObject;
-export declare const themeStyles: (props: ThemeTokens, appearance: TextAreaProps['appearance']) => CSSObject;
+export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => import("@emotion/react").SerializedStyles;
+export declare const themeStyles: (props: ThemeTokens, appearance: TextAreaProps['appearance']) => import("@emotion/react").SerializedStyles;

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

@@ -10,5 +10,5 @@ import { TextAreaProps } from './types';
  * - [Code](https://atlassian.design/components/textarea/code)
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
-declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "minimumRows" | "maxHeight" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "isMonospaced" | "resize" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "onFocusCapture" | "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" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
+declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "minimumRows" | "maxHeight" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "isMonospaced" | "resize" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "onFocusCapture" | "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" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
 export default TextArea;

package/dist/types-ts4.0/styles.d.ts

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { CSSObject } from '@emotion/core';
 import { ThemeTokens } from './theme';
 import { TextAreaProps } from './types';
 export interface StyleProps {
@@ -10,5 +8,5 @@ export interface StyleProps {
     maxHeight: string;
 }
 export declare const borderWidth = 2;
-export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => CSSObject;
-export declare const themeStyles: (props: ThemeTokens, appearance: TextAreaProps['appearance']) => CSSObject;
+export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => import("@emotion/react").SerializedStyles;
+export declare const themeStyles: (props: ThemeTokens, appearance: TextAreaProps['appearance']) => import("@emotion/react").SerializedStyles;

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

@@ -10,5 +10,5 @@ import { TextAreaProps } from './types';
  * - [Code](https://atlassian.design/components/textarea/code)
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
-declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "minimumRows" | "maxHeight" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "isMonospaced" | "resize" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "onFocusCapture" | "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" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
+declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "minimumRows" | "maxHeight" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "isMonospaced" | "resize" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "onFocusCapture" | "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" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
 export default TextArea;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -51,8 +51,8 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/form": "^8.5.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/form": "^8.6.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/textarea"
+## API Report File for "@atlaskit/textarea".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
@@ -20,35 +22,65 @@ declare interface OwnProps extends WithAnalyticsEventsProps {
    * none prevents all field styling.
    */
   appearance?: 'standard' | 'subtle' | 'none';
-  /** Set whether the fields should expand to fill available horizontal space. */
+  /**
+   * Set whether the fields should expand to fill available horizontal space.
+   */
   isCompact?: boolean;
-  /** Sets the field as uneditable, with a changed hover state. */
+  /**
+   * Sets the field as uneditable, with a changed hover state.
+   */
   isDisabled?: boolean;
-  /** If true, prevents the value of the input from being edited. */
+  /**
+   * If true, prevents the value of the input from being edited.
+   */
   isReadOnly?: boolean;
-  /** Set required for form that the field is part of. */
+  /**
+   * Set required for form that the field is part of.
+   */
   isRequired?: boolean;
-  /** Sets styling to indicate that the input is invalid. */
+  /**
+   * Sets styling to indicate that the input is invalid.
+   */
   isInvalid?: boolean;
-  /** The minimum number of rows of text to display */
+  /**
+   * The minimum number of rows of text to display
+   */
   minimumRows?: number;
-  /** The maxheight of the textarea */
+  /**
+   * The maxheight of the textarea
+   */
   maxHeight?: string;
-  /** The value of the text-area. */
+  /**
+   * The value of the text-area.
+   */
   value?: string;
-  /** The default value of the textarea */
+  /**
+   * The default value of the textarea
+   */
   defaultValue?: string;
-  /** Name of the input form control */
+  /**
+   * Name of the input form control
+   */
   name?: string;
-  /** The placeholder within the textarea */
+  /**
+   * The placeholder within the textarea
+   */
   placeholder?: string;
-  /** Handler to be called when the input is blurred */
+  /**
+   * Handler to be called when the input is blurred
+   */
   onBlur?: React_2.FocusEventHandler<HTMLTextAreaElement>;
-  /** Handler to be called when the input changes. */
+  /**
+   * Handler to be called when the input changes.
+   */
   onChange?: React_2.ChangeEventHandler<HTMLTextAreaElement>;
-  /** Handler to be called when the input is focused */
+  /**
+   * Handler to be called when the input is focused
+   */
   onFocus?: React_2.FocusEventHandler<HTMLTextAreaElement>;
-  /** Sets content text value to monospace */
+  /**
+   * Sets content text value to monospace
+   */
   isMonospaced?: boolean;
   /**
    * Enables the resizing of the textarea:
@@ -70,21 +102,23 @@ declare interface OwnProps extends WithAnalyticsEventsProps {
   /**
    * A `testId` prop is provided for specified elements, which is a unique
    * string that appears as a data attribute `data-testid` in the rendered code,
-   * serving as a hook for automated tests */
+   * serving as a hook for automated tests
+   */
   testId?: string;
 }
 
-declare type Props = Combine<
-  Omit<
-    React_2.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    'disabled' | 'required' | 'readonly'
-  >,
-  OwnProps
->;
-
+/**
+ * __Text area__
+ *
+ * A text area lets users enter long form text which spans over multiple lines.
+ *
+ * - [Examples](https://atlassian.design/components/textarea/examples)
+ * - [Code](https://atlassian.design/components/textarea/code)
+ * - [Usage](https://atlassian.design/components/textarea/usage)
+ */
 declare const TextArea: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<
   Pick<
-    Props,
+    TextAreaProps,
     | 'appearance'
     | 'color'
     | 'maxHeight'
@@ -355,7 +389,6 @@ declare const TextArea: React_2.MemoExoticComponent<React_2.ForwardRefExoticComp
     | 'onAnimationIterationCapture'
     | 'onTransitionEnd'
     | 'onTransitionEndCapture'
-    | 'css'
     | 'isCompact'
     | 'isDisabled'
     | 'isReadOnly'
@@ -369,6 +402,19 @@ declare const TextArea: React_2.MemoExoticComponent<React_2.ForwardRefExoticComp
 >>;
 export default TextArea;
 
+declare type TextAreaProps = Combine<
+  Omit<
+    React_2.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'disabled' | 'required' | 'readonly'
+  >,
+  OwnProps
+>;
+
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 export declare const Theme: {
   Consumer: ComponentType<
     {
@@ -386,9 +432,18 @@ export declare type ThemeAppearance = 'standard' | 'subtle' | 'none';
 
 export declare type ThemeProps = {
   appearance: ThemeAppearance;
+  /**
+   * @deprecated
+   * Mode is deprecated and will be deleted in the future.
+   */
   mode: 'dark' | 'light';
 };
 
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 export declare type ThemeTokens = {
   borderColor: string;
   borderColorFocus: string;
@@ -414,6 +469,11 @@ export declare type ThemeTokens = {
   placeholderTextColor: string;
 };
 
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 export declare const themeTokens: {
   borderColor: {
     standard: {
@@ -445,8 +505,8 @@ export declare const themeTokens: {
   };
   backgroundColor: {
     standard: {
-      light: 'var(--ds-background-neutral)';
-      dark: 'var(--ds-background-neutral)';
+      light: 'var(--ds-background-input)';
+      dark: 'var(--ds-background-input)';
     };
     subtle: {
       light: string;
@@ -477,8 +537,8 @@ export declare const themeTokens: {
       dark: 'var(--ds-background-input-hovered)';
     };
     subtle: {
-      light: 'var(--ds-background-neutral-subtle-hovered)';
-      dark: 'var(--ds-background-neutral-subtle-hovered)';
+      light: 'var(--ds-background-input-hovered)';
+      dark: 'var(--ds-background-input-hovered)';
     };
     none: {
       light: string;
@@ -507,14 +567,14 @@ export declare const themeTokens: {
     light: {
       borderColor: 'var(--ds-border-danger)';
       borderColorFocus: 'var(--ds-border-focused)';
-      backgroundColor: 'var(--ds-background-neutral)';
+      backgroundColor: 'var(--ds-background-input)';
       backgroundColorFocus: 'var(--ds-background-input-pressed)';
       backgroundColorHover: 'var(--ds-background-input-hovered)';
     };
     dark: {
       borderColor: 'var(--ds-border-danger)';
       borderColorFocus: 'var(--ds-border-focused)';
-      backgroundColor: 'var(--ds-background-neutral)';
+      backgroundColor: 'var(--ds-background-input)';
       backgroundColorFocus: 'var(--ds-background-input-pressed)';
       backgroundColorHover: 'var(--ds-background-input-hovered)';
     };