@atlaskit/textarea 4.3.11 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [`b8841384da6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8841384da6) - Disabled background and border styles should not be applied to components that have either no background or transparent background to begin with. Textfield and textarea variants that do not have backgrounds (sublte or none) have no backgrounds or borders applied when disabled. As such, any comopnents that consume these will also be affected.
+
 ## 4.3.11
 
 ### Patch 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; }
@@ -45,8 +47,8 @@ var borderBoxMinHeightCompact = function borderBoxMinHeightCompact(minimumRows,
   return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
 };
 
-var bgAndBorderColorStyles = function bgAndBorderColorStyles(props) {
-  return {
+var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance) {
+  return (0, _react.css)(_objectSpread({
     '&:focus': {
       backgroundColor: props.backgroundColorFocus,
       borderColor: props.borderColorFocus
@@ -55,112 +57,117 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props) {
       backgroundColor: props.backgroundColor,
       borderColor: props.borderColor
     },
-    '&:disabled:focus': {
-      backgroundColor: props.disabledRules.backgroundColorFocus,
-      borderColor: props.disabledRules.borderColorFocus
-    },
-    '&:disabled:not(:focus)': {
-      backgroundColor: props.disabledRules.backgroundColor,
-      borderColor: props.disabledRules.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
     }
-  };
+  }, appearance === 'standard' ? {
+    '&:disabled:focus': {
+      backgroundColor: props.disabledRules.backgroundColorFocus,
+      borderColor: props.disabledRules.borderColorFocus
+    },
+    '&:disabled:not(:focus)': {
+      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),
@@ -170,7 +177,7 @@ var staticStyles = {
   '&:invalid': {
     boxShadow: 'none'
   }
-};
+});
 
 var getBaseStyles = function getBaseStyles(_ref) {
   var minimumRows = _ref.minimumRows,
@@ -178,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) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundAndBorderStyles(props)), placeholderStyle(props.placeholderTextColor)), {}, {
-    color: props.textColor,
-    '&:disabled': {
-      color: props.disabledRules.textColor
-    }
-  });
+var themeStyles = function themeStyles(props, appearance) {
+  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.3.11";
+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)];
-  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/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.3.11",
+	"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 => ({
+const bgAndBorderColorStyles = (props, appearance) => css({
   '&:focus': {
     backgroundColor: props.backgroundColorFocus,
     borderColor: props.borderColorFocus
@@ -38,105 +39,111 @@ const bgAndBorderColorStyles = props => ({
     backgroundColor: props.backgroundColor,
     borderColor: props.borderColor
   },
-  '&:disabled:focus': {
-    backgroundColor: props.disabledRules.backgroundColorFocus,
-    borderColor: props.disabledRules.borderColorFocus
-  },
-  '&:disabled:not(:focus)': {
-    backgroundColor: props.disabledRules.backgroundColor,
-    borderColor: props.disabledRules.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
-  }
+  },
+  // Disabled background and border styles should not be applied to components that
+  // have either no background or transparent background to begin with
+  ...(appearance === 'standard' ? {
+    '&:disabled:focus': {
+      backgroundColor: props.disabledRules.backgroundColorFocus,
+      borderColor: props.disabledRules.borderColorFocus
+    },
+    '&:disabled:not(:focus)': {
+      backgroundColor: props.disabledRules.backgroundColor,
+      borderColor: props.disabledRules.borderColor
+    }
+  } : {})
 });
 
-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
@@ -147,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 => {
-  return { ...bgAndBorderColorStyles(props),
-    ...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.3.11";
+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)];
+  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/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

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