@atlaskit/textarea 5.1.1 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/textarea
 
+## 5.2.0
+
+### Minor Changes
+
+- [#82028](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82028) [`065756e95a09`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/065756e95a09) - [ux] This change includes a fix for the TextArea's text color when there is a placeholder and isDisabled is true.
+
+## 5.1.2
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+
 ## 5.1.1
 
 ### Patch Changes

package/component-tokens/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/component-tokens.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/component-tokens.d.ts"
       ]

package/dist/cjs/styles.js

@@ -120,13 +120,14 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(appearance) {
     }
   } : {}));
 };
-var placeholderStyle = function placeholderStyle(placeholderTextColor) {
-  return (0, _react.css)({
-    '&::placeholder': {
-      color: placeholderTextColor
-    }
-  });
-};
+var placeholderStyles = (0, _react.css)({
+  '&::placeholder': {
+    color: componentTokens.placeholderTextColor
+  },
+  '&:disabled::placeholder': {
+    color: disabledRules.textColor
+  }
+});
 var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(appearance) {
   return appearance && (0, _react.css)({
     '&:hover:not(:read-only):not(:focus)': {
@@ -234,7 +235,7 @@ var getBaseStyles = exports.getBaseStyles = function getBaseStyles(_ref) {
 var dynamicStyles = exports.dynamicStyles = function dynamicStyles(appearance) {
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-    (0, _react.css)([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyle(componentTokens.placeholderTextColor), {
+    (0, _react.css)([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyles, {
       color: componentTokens.textColor,
       '&:disabled': {
         color: disabledRules.textColor

package/dist/cjs/text-area.js

@@ -21,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/textarea";
-var packageVersion = "5.1.1";
+var packageVersion = "5.2.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/es2019/styles.js

@@ -111,9 +111,12 @@ const bgAndBorderColorStyles = appearance => appearance && css({
     }
   } : {})
 });
-const placeholderStyle = placeholderTextColor => css({
+const placeholderStyles = css({
   '&::placeholder': {
-    color: placeholderTextColor
+    color: componentTokens.placeholderTextColor
+  },
+  '&:disabled::placeholder': {
+    color: disabledRules.textColor
   }
 });
 const hoverBackgroundAndBorderStyles = appearance => appearance && css({
@@ -214,7 +217,7 @@ css([staticStyles, borderPaddingAndHeightStyles(minimumRows, appearance), resize
 }]);
 export const dynamicStyles = appearance =>
 // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-css([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyle(componentTokens.placeholderTextColor), {
+css([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyles, {
   color: componentTokens.textColor,
   '&:disabled': {
     color: disabledRules.textColor

package/dist/es2019/text-area.js

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "5.1.1";
+const packageVersion = "5.2.0";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,

package/dist/esm/styles.js

@@ -113,13 +113,14 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(appearance) {
     }
   } : {}));
 };
-var placeholderStyle = function placeholderStyle(placeholderTextColor) {
-  return css({
-    '&::placeholder': {
-      color: placeholderTextColor
-    }
-  });
-};
+var placeholderStyles = css({
+  '&::placeholder': {
+    color: componentTokens.placeholderTextColor
+  },
+  '&:disabled::placeholder': {
+    color: disabledRules.textColor
+  }
+});
 var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(appearance) {
   return appearance && css({
     '&:hover:not(:read-only):not(:focus)': {
@@ -227,7 +228,7 @@ export var getBaseStyles = function getBaseStyles(_ref) {
 export var dynamicStyles = function dynamicStyles(appearance) {
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-    css([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyle(componentTokens.placeholderTextColor), {
+    css([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyles, {
       color: componentTokens.textColor,
       '&:disabled': {
         color: disabledRules.textColor

package/dist/esm/text-area.js

@@ -11,7 +11,7 @@ import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "5.1.1";
+var packageVersion = "5.2.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.41.0",
+    "@atlaskit/tokens": "^1.42.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -65,7 +65,7 @@
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "~4.9.5",
+    "typescript": "~5.4.2",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [
@@ -102,4 +102,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/styles/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/styles.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/styles.d.ts"
       ]

package/text-area/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/text-area.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/text-area.d.ts"
       ]