@atlaskit/textarea 4.5.3 → 4.5.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/textarea
 
+## 4.5.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.5.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.5.3
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transparent = exports.textColor = exports.subtleBorderColorHover = 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 disabledBackground = {
   light: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
   dark: "var(--ds-background-disabled, ".concat(_colors.DN20, ")")

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,7 +22,5 @@ Object.defineProperty(exports, "themeTokens", {
     return _theme.themeTokens;
   }
 });
-
 var _textArea = _interopRequireDefault(require("./text-area"));
-
 var _theme = require("./theme");

package/dist/cjs/styles.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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; }
-
 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;
 var lineHeightBase = grid * 2.5;
@@ -28,25 +21,23 @@ var transitionDuration = '0.2s';
 var fontSize = (0, _constants.fontSize)();
 var fontFamily = (0, _constants.fontFamily)();
 var codeFontFamily = (0, _constants.codeFontFamily)();
-var borderWidth = 2; // Safari puts on some difficult to remove styles, mainly for disabled inputs
-// but we want full control so need to override them in all cases
+var borderWidth = 2;
 
+// Safari puts on some difficult to remove styles, mainly for disabled inputs
+// but we want full control so need to override them in all cases
 exports.borderWidth = borderWidth;
 var overrideSafariDisabledStyles = {
   WebkitTextFillColor: 'unset',
   WebkitOpacity: '1'
 };
-
 var borderBoxMinHeight = function borderBoxMinHeight(minimumRows, borderHeight) {
   var contentHeight = lineHeightBase * minimumRows;
   return contentHeight + verticalPadding * 2 + borderHeight * 2;
 };
-
 var borderBoxMinHeightCompact = function borderBoxMinHeightCompact(minimumRows, borderHeight) {
   var contentHeightCompact = lineHeightCompact * minimumRows;
   return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
 };
-
 var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance) {
   return (0, _react.css)(_objectSpread({
     '&:focus': {
@@ -78,7 +69,6 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
     }
   } : {}));
 };
-
 var placeholderStyle = function placeholderStyle(placeholderTextColor) {
   return (0, _react.css)({
     '&::placeholder': {
@@ -86,7 +76,6 @@ var placeholderStyle = function placeholderStyle(placeholderTextColor) {
     }
   });
 };
-
 var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
   return (0, _react.css)({
     '&:hover:not(:read-only):not(:focus)': {
@@ -102,37 +91,31 @@ var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(pro
     }
   });
 };
-
 var resizeStyle = function resizeStyle(resize) {
   if (resize === 'horizontal' || resize === 'vertical') {
     return (0, _react.css)({
       resize: resize
     });
   }
-
   if (resize === 'auto') {
     return (0, _react.css)({
       resize: 'both'
     });
   }
-
   return (0, _react.css)({
     resize: 'none'
   });
 };
-
 var borderStyle = function borderStyle(appearance) {
   return (0, _react.css)({
     borderStyle: appearance === 'none' ? 'none' : 'solid'
   });
 };
-
 var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
   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;
@@ -151,7 +134,6 @@ var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
     }
   });
 };
-
 var staticStyles = (0, _react.css)({
   display: 'block',
   boxSizing: 'border-box',
@@ -178,24 +160,23 @@ var staticStyles = (0, _react.css)({
     boxShadow: 'none'
   }
 });
-
 var getBaseStyles = function getBaseStyles(_ref) {
   var minimumRows = _ref.minimumRows,
-      resize = _ref.resize,
-      appearance = _ref.appearance,
-      isMonospaced = _ref.isMonospaced,
-      maxHeight = _ref.maxHeight;
-  return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
+    resize = _ref.resize,
+    appearance = _ref.appearance,
+    isMonospaced = _ref.isMonospaced,
+    maxHeight = _ref.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 (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
+  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': {
@@ -204,5 +185,4 @@ var themeStyles = function themeStyles(props, appearance) {
     }])
   );
 };
-
 exports.themeStyles = themeStyles;

package/dist/cjs/text-area.js

@@ -1,52 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _components = require("@atlaskit/theme/components");
-
 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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (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.5.3";
+var packageVersion = "4.5.5";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
   packageVersion: packageVersion
 };
-
 var setSmartHeight = function setSmartHeight(el) {
   // Always reset height to auto before calculating new height
   el.style.height = 'auto';
@@ -55,40 +36,38 @@ var setSmartHeight = function setSmartHeight(el) {
   var borderBoxHeight = paddingBoxHeight + borderHeight * 2;
   el.style.height = "".concat(borderBoxHeight, "px");
 };
-
 var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var ourRef = (0, _react.useRef)(null);
   var _props$resize = props.resize,
-      resize = _props$resize === void 0 ? 'smart' : _props$resize,
-      _props$appearance = props.appearance,
-      appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
-      _props$isCompact = props.isCompact,
-      isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
-      _props$isRequired = props.isRequired,
-      isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-      _props$isReadOnly = props.isReadOnly,
-      isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
-      _props$isDisabled = props.isDisabled,
-      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-      _props$isInvalid = props.isInvalid,
-      isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
-      _props$isMonospaced = props.isMonospaced,
-      isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
-      _props$minimumRows = props.minimumRows,
-      minimumRows = _props$minimumRows === void 0 ? 2 : _props$minimumRows,
-      theme = props.theme,
-      testId = props.testId,
-      _props$maxHeight = props.maxHeight,
-      maxHeight = _props$maxHeight === void 0 ? '50vh' : _props$maxHeight,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      onChange = props.onChange,
-      tokens = props.tokens,
-      value = props.value,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+    resize = _props$resize === void 0 ? 'smart' : _props$resize,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
+    _props$isCompact = props.isCompact,
+    isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    _props$isReadOnly = props.isReadOnly,
+    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$isInvalid = props.isInvalid,
+    isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+    _props$isMonospaced = props.isMonospaced,
+    isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
+    _props$minimumRows = props.minimumRows,
+    minimumRows = _props$minimumRows === void 0 ? 2 : _props$minimumRows,
+    theme = props.theme,
+    testId = props.testId,
+    _props$maxHeight = props.maxHeight,
+    maxHeight = _props$maxHeight === void 0 ? '50vh' : _props$maxHeight,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onChange = props.onChange,
+    tokens = props.tokens,
+    value = props.value,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   (0, _react.useEffect)(function () {
     var el = ourRef.current;
-
     if (resize === 'smart' && el) {
       setSmartHeight(el);
     }
@@ -105,27 +84,21 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     },
     action: 'focused'
   }, analyticsParams));
-
   var getTextAreaRef = function getTextAreaRef(elementRef) {
     ourRef.current = elementRef;
-
     if (ref && (0, _typeof2.default)(ref) === 'object') {
       // @ts-ignore
       ref.current = elementRef;
     }
-
     if (ref && typeof ref === 'function') {
       ref(elementRef);
     }
   };
-
   var handleOnChange = (0, _react.useCallback)(function (e) {
     var el = ourRef.current;
-
     if (resize === 'smart' && el) {
       setSmartHeight(el);
     }
-
     onChange && onChange(e);
   }, [onChange, resize]);
   var controlProps = {
@@ -142,7 +115,8 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       maxHeight: maxHeight
     });
   }, [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-  var textAreaStyles = (0, _react2.css)([baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
+  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,
@@ -153,13 +127,15 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     onChange: handleOnChange,
     onBlur: onBlurWithAnalytics,
     onFocus: onFocusWithAnalytics,
-    rows: minimumRows // TODO refactor to follow emotion styling rules
+    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
   }, rest));
 });
+
 /**
  * __Text area__
  *
@@ -169,11 +145,9 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
  * - [Code](https://atlassian.design/components/textarea/code)
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
-
 var TextArea = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function TextArea(props, ref) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return (0, _react2.jsx)(_theme.Theme.Provider, {
     value: props.theme
   }, (0, _react2.jsx)(_theme.Theme.Consumer, {

package/dist/cjs/theme.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.themeTokens = exports.Theme = void 0;
-
 var _components = require("@atlaskit/theme/components");
-
 var componentTokens = _interopRequireWildcard(require("./component-tokens"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var disabledRules = {
   light: {
     backgroundColor: componentTokens.disabledBackground.light,
@@ -79,7 +73,6 @@ var borderColorHover = {
   subtle: componentTokens.subtleBorderColorHover,
   none: componentTokens.transparent
 };
-
 /**
  * @deprecated
  * Component-level theming is deprecated in the design system.
@@ -96,16 +89,16 @@ var themeTokens = {
   textColor: componentTokens.textColor,
   placeholderTextColor: componentTokens.placeholderTextColor
 };
+
 /**
  * @deprecated
  * Component-level theming is deprecated in the design system.
  * Components should respect the global theme.
  */
-
 exports.themeTokens = themeTokens;
 var Theme = (0, _components.createTheme)(function (_ref) {
   var appearance = _ref.appearance,
-      mode = _ref.mode;
+    mode = _ref.mode;
   return {
     borderColor: borderColor[appearance][mode],
     borderColorFocus: borderColorFocus[appearance][mode],

package/dist/cjs/version.json

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

package/dist/es2019/styles.js

@@ -12,24 +12,22 @@ const transitionDuration = '0.2s';
 const fontSize = getFontSize();
 const fontFamily = getFontFamily();
 const codeFontFamily = getCodeFontFamily();
-export const borderWidth = 2; // Safari puts on some difficult to remove styles, mainly for disabled inputs
-// but we want full control so need to override them in all cases
+export const borderWidth = 2;
 
+// Safari puts on some difficult to remove styles, mainly for disabled inputs
+// but we want full control so need to override them in all cases
 const overrideSafariDisabledStyles = {
   WebkitTextFillColor: 'unset',
   WebkitOpacity: '1'
 };
-
 const borderBoxMinHeight = (minimumRows, borderHeight) => {
   const contentHeight = lineHeightBase * minimumRows;
   return contentHeight + verticalPadding * 2 + borderHeight * 2;
 };
-
 const borderBoxMinHeightCompact = (minimumRows, borderHeight) => {
   const contentHeightCompact = lineHeightCompact * minimumRows;
   return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
 };
-
 const bgAndBorderColorStyles = (props, appearance) => css({
   '&:focus': {
     backgroundColor: props.backgroundColorFocus,
@@ -62,13 +60,11 @@ const bgAndBorderColorStyles = (props, appearance) => css({
     }
   } : {})
 });
-
 const placeholderStyle = placeholderTextColor => css({
   '&::placeholder': {
     color: placeholderTextColor
   }
 });
-
 const hoverBackgroundAndBorderStyles = props => css({
   '&:hover:not(:read-only):not(:focus)': {
     backgroundColor: props.backgroundColorHover,
@@ -82,33 +78,27 @@ const hoverBackgroundAndBorderStyles = props => css({
     }
   }
 });
-
 const resizeStyle = resize => {
   if (resize === 'horizontal' || resize === 'vertical') {
     return css({
       resize
     });
   }
-
   if (resize === 'auto') {
     return css({
       resize: 'both'
     });
   }
-
   return css({
     resize: 'none'
   });
 };
-
 const borderStyle = appearance => css({
   borderStyle: appearance === 'none' ? 'none' : 'solid'
 });
-
 const fontFamilyStyle = isMonospaced => css({
   fontFamily: isMonospaced ? codeFontFamily : fontFamily
 });
-
 const borderPaddingAndHeightStyles = (minimumRows = 1) => {
   const horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
   const borderHeight = borderWidth;
@@ -126,7 +116,6 @@ const borderPaddingAndHeightStyles = (minimumRows = 1) => {
     }
   });
 };
-
 const staticStyles = css({
   display: 'block',
   boxSizing: 'border-box',
@@ -161,11 +150,13 @@ export const getBaseStyles = ({
   appearance,
   isMonospaced,
   maxHeight
-}) => // eslint-disable-next-line @repo/internal/styles/no-exported-styles
+}) =>
+// 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) => // eslint-disable-next-line @repo/internal/styles/no-exported-styles
+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': {

package/dist/es2019/text-area.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -8,13 +7,12 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "4.5.3";
+const packageVersion = "4.5.5";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,
   packageVersion
 };
-
 const setSmartHeight = el => {
   // Always reset height to auto before calculating new height
   el.style.height = 'auto';
@@ -23,7 +21,6 @@ const setSmartHeight = el => {
   const borderBoxHeight = paddingBoxHeight + borderHeight * 2;
   el.style.height = `${borderBoxHeight}px`;
 };
-
 const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
   const ourRef = useRef(null);
   const {
@@ -48,7 +45,6 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   useEffect(() => {
     const el = ourRef.current;
-
     if (resize === 'smart' && el) {
       setSmartHeight(el);
     }
@@ -67,27 +63,21 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     action: 'focused',
     ...analyticsParams
   });
-
   const getTextAreaRef = elementRef => {
     ourRef.current = elementRef;
-
     if (ref && typeof ref === 'object') {
       // @ts-ignore
       ref.current = elementRef;
     }
-
     if (ref && typeof ref === 'function') {
       ref(elementRef);
     }
   };
-
   const handleOnChange = useCallback(e => {
     const el = ourRef.current;
-
     if (resize === 'smart' && el) {
       setSmartHeight(el);
     }
-
     onChange && onChange(e);
   }, [onChange, resize]);
   const controlProps = {
@@ -102,7 +92,8 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     isMonospaced,
     maxHeight
   }), [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-  const textAreaStyles = css([baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
+  const textAreaStyles = css([baseStyles,
+  // not memoizing themeStyles as `tokens` is an unstable reference
   themeStyles(tokens, appearance)]);
   return jsx("textarea", _extends({}, controlProps, {
     value: value,
@@ -113,13 +104,15 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     onChange: handleOnChange,
     onBlur: onBlurWithAnalytics,
     onFocus: onFocusWithAnalytics,
-    rows: minimumRows // TODO refactor to follow emotion styling rules
+    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
   }, rest));
 });
+
 /**
  * __Text area__
  *
@@ -129,7 +122,6 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
  * - [Code](https://atlassian.design/components/textarea/code)
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
-
 const TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
   const {
     mode

package/dist/es2019/theme.js

@@ -64,7 +64,6 @@ const borderColorHover = {
   subtle: componentTokens.subtleBorderColorHover,
   none: componentTokens.transparent
 };
-
 /**
  * @deprecated
  * Component-level theming is deprecated in the design system.
@@ -81,12 +80,12 @@ export const themeTokens = {
   textColor: componentTokens.textColor,
   placeholderTextColor: componentTokens.placeholderTextColor
 };
+
 /**
  * @deprecated
  * Component-level theming is deprecated in the design system.
  * Components should respect the global theme.
  */
-
 export const Theme = createTheme(({
   appearance,
   mode

package/dist/es2019/version.json

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

package/dist/esm/styles.js

@@ -1,9 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize, gridSize } from '@atlaskit/theme/constants';
@@ -18,24 +15,22 @@ var transitionDuration = '0.2s';
 var fontSize = getFontSize();
 var fontFamily = getFontFamily();
 var codeFontFamily = getCodeFontFamily();
-export var borderWidth = 2; // Safari puts on some difficult to remove styles, mainly for disabled inputs
-// but we want full control so need to override them in all cases
+export var borderWidth = 2;
 
+// Safari puts on some difficult to remove styles, mainly for disabled inputs
+// but we want full control so need to override them in all cases
 var overrideSafariDisabledStyles = {
   WebkitTextFillColor: 'unset',
   WebkitOpacity: '1'
 };
-
 var borderBoxMinHeight = function borderBoxMinHeight(minimumRows, borderHeight) {
   var contentHeight = lineHeightBase * minimumRows;
   return contentHeight + verticalPadding * 2 + borderHeight * 2;
 };
-
 var borderBoxMinHeightCompact = function borderBoxMinHeightCompact(minimumRows, borderHeight) {
   var contentHeightCompact = lineHeightCompact * minimumRows;
   return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
 };
-
 var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance) {
   return css(_objectSpread({
     '&:focus': {
@@ -67,7 +62,6 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
     }
   } : {}));
 };
-
 var placeholderStyle = function placeholderStyle(placeholderTextColor) {
   return css({
     '&::placeholder': {
@@ -75,7 +69,6 @@ var placeholderStyle = function placeholderStyle(placeholderTextColor) {
     }
   });
 };
-
 var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
   return css({
     '&:hover:not(:read-only):not(:focus)': {
@@ -91,37 +84,31 @@ var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(pro
     }
   });
 };
-
 var resizeStyle = function resizeStyle(resize) {
   if (resize === 'horizontal' || resize === 'vertical') {
     return css({
       resize: resize
     });
   }
-
   if (resize === 'auto') {
     return css({
       resize: 'both'
     });
   }
-
   return css({
     resize: 'none'
   });
 };
-
 var borderStyle = function borderStyle(appearance) {
   return css({
     borderStyle: appearance === 'none' ? 'none' : 'solid'
   });
 };
-
 var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
   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;
@@ -140,7 +127,6 @@ var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
     }
   });
 };
-
 var staticStyles = css({
   display: 'block',
   boxSizing: 'border-box',
@@ -169,18 +155,20 @@ var staticStyles = css({
 });
 export var getBaseStyles = function getBaseStyles(_ref) {
   var minimumRows = _ref.minimumRows,
-      resize = _ref.resize,
-      appearance = _ref.appearance,
-      isMonospaced = _ref.isMonospaced,
-      maxHeight = _ref.maxHeight;
-  return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
+    resize = _ref.resize,
+    appearance = _ref.appearance,
+    isMonospaced = _ref.isMonospaced,
+    maxHeight = _ref.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 (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
+  return (
+    // eslint-disable-next-line @repo/internal/styles/no-exported-styles
     css([bgAndBorderColorStyles(props, appearance), hoverBackgroundAndBorderStyles(props), placeholderStyle(props.placeholderTextColor), {
       color: props.textColor,
       '&:disabled': {

package/dist/esm/text-area.js

@@ -3,11 +3,8 @@ 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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /** @jsx jsx */
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -16,13 +13,12 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.5.3";
+var packageVersion = "4.5.5";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
   packageVersion: packageVersion
 };
-
 var setSmartHeight = function setSmartHeight(el) {
   // Always reset height to auto before calculating new height
   el.style.height = 'auto';
@@ -31,42 +27,38 @@ var setSmartHeight = function setSmartHeight(el) {
   var borderBoxHeight = paddingBoxHeight + borderHeight * 2;
   el.style.height = "".concat(borderBoxHeight, "px");
 };
-
 var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
   var ourRef = useRef(null);
-
   var _props$resize = props.resize,
-      resize = _props$resize === void 0 ? 'smart' : _props$resize,
-      _props$appearance = props.appearance,
-      appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
-      _props$isCompact = props.isCompact,
-      isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
-      _props$isRequired = props.isRequired,
-      isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-      _props$isReadOnly = props.isReadOnly,
-      isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
-      _props$isDisabled = props.isDisabled,
-      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-      _props$isInvalid = props.isInvalid,
-      isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
-      _props$isMonospaced = props.isMonospaced,
-      isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
-      _props$minimumRows = props.minimumRows,
-      minimumRows = _props$minimumRows === void 0 ? 2 : _props$minimumRows,
-      theme = props.theme,
-      testId = props.testId,
-      _props$maxHeight = props.maxHeight,
-      maxHeight = _props$maxHeight === void 0 ? '50vh' : _props$maxHeight,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      onChange = props.onChange,
-      tokens = props.tokens,
-      value = props.value,
-      rest = _objectWithoutProperties(props, _excluded);
-
+    resize = _props$resize === void 0 ? 'smart' : _props$resize,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
+    _props$isCompact = props.isCompact,
+    isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    _props$isReadOnly = props.isReadOnly,
+    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$isInvalid = props.isInvalid,
+    isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+    _props$isMonospaced = props.isMonospaced,
+    isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
+    _props$minimumRows = props.minimumRows,
+    minimumRows = _props$minimumRows === void 0 ? 2 : _props$minimumRows,
+    theme = props.theme,
+    testId = props.testId,
+    _props$maxHeight = props.maxHeight,
+    maxHeight = _props$maxHeight === void 0 ? '50vh' : _props$maxHeight,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onChange = props.onChange,
+    tokens = props.tokens,
+    value = props.value,
+    rest = _objectWithoutProperties(props, _excluded);
   useEffect(function () {
     var el = ourRef.current;
-
     if (resize === 'smart' && el) {
       setSmartHeight(el);
     }
@@ -83,27 +75,21 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     action: 'focused'
   }, analyticsParams));
-
   var getTextAreaRef = function getTextAreaRef(elementRef) {
     ourRef.current = elementRef;
-
     if (ref && _typeof(ref) === 'object') {
       // @ts-ignore
       ref.current = elementRef;
     }
-
     if (ref && typeof ref === 'function') {
       ref(elementRef);
     }
   };
-
   var handleOnChange = useCallback(function (e) {
     var el = ourRef.current;
-
     if (resize === 'smart' && el) {
       setSmartHeight(el);
     }
-
     onChange && onChange(e);
   }, [onChange, resize]);
   var controlProps = {
@@ -120,7 +106,8 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
       maxHeight: maxHeight
     });
   }, [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-  var textAreaStyles = css([baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
+  var textAreaStyles = css([baseStyles,
+  // not memoizing themeStyles as `tokens` is an unstable reference
   themeStyles(tokens, appearance)]);
   return jsx("textarea", _extends({}, controlProps, {
     value: value,
@@ -131,13 +118,15 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: handleOnChange,
     onBlur: onBlurWithAnalytics,
     onFocus: onFocusWithAnalytics,
-    rows: minimumRows // TODO refactor to follow emotion styling rules
+    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
   }, rest));
 });
+
 /**
  * __Text area__
  *
@@ -147,11 +136,9 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
  * - [Code](https://atlassian.design/components/textarea/code)
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
-
 var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
   var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return jsx(Theme.Provider, {
     value: props.theme
   }, jsx(Theme.Consumer, {

package/dist/esm/theme.js

@@ -64,7 +64,6 @@ var borderColorHover = {
   subtle: componentTokens.subtleBorderColorHover,
   none: componentTokens.transparent
 };
-
 /**
  * @deprecated
  * Component-level theming is deprecated in the design system.
@@ -81,15 +80,15 @@ export var themeTokens = {
   textColor: componentTokens.textColor,
   placeholderTextColor: componentTokens.placeholderTextColor
 };
+
 /**
  * @deprecated
  * Component-level theming is deprecated in the design system.
  * Components should respect the global theme.
  */
-
 export var Theme = createTheme(function (_ref) {
   var appearance = _ref.appearance,
-      mode = _ref.mode;
+    mode = _ref.mode;
   return {
     borderColor: borderColor[appearance][mode],
     borderColorFocus: borderColorFocus[appearance][mode],

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.5.3",
+  "version": "4.5.5",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.12.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/textarea"