@atlaskit/textarea 4.2.5 → 4.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/component-tokens.js +18 -18
  3. package/dist/cjs/text-area.js +7 -4
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/component-tokens.js +18 -18
  6. package/dist/es2019/text-area.js +6 -3
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/component-tokens.js +18 -18
  9. package/dist/esm/text-area.js +7 -4
  10. package/dist/esm/version.json +1 -1
  11. package/dist/types/component-tokens.d.ts +18 -18
  12. package/dist/types/theme.d.ts +32 -32
  13. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/textarea
2
2
 
3
+ ## 4.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 4.3.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`2e56ff8ea50`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e56ff8ea50) - [ux] Fixed a bug where smart resize did not work when the value prop was changed
14
+
15
+ ## 4.2.6
16
+
17
+ ### Patch Changes
18
+
19
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
20
+ - Updated dependencies
21
+
3
22
  ## 4.2.5
4
23
 
5
24
  ### Patch Changes
package/dist/cjs/component-tokens.js CHANGED
@@ -18,49 +18,49 @@ var disabledBorder = {
18
18
  };
19
19
  exports.disabledBorder = disabledBorder;
20
20
  var invalidBorderColor = {
21
- light: "var(--ds-iconBorder-danger, ".concat(_colors.R400, ")"),
22
- dark: "var(--ds-iconBorder-danger, ".concat(_colors.R400, ")")
21
+ light: "var(--ds-border-danger, ".concat(_colors.R400, ")"),
22
+ dark: "var(--ds-border-danger, ".concat(_colors.R400, ")")
23
23
  };
24
24
  exports.invalidBorderColor = invalidBorderColor;
25
25
  var defaultBorderColor = {
26
- light: "var(--ds-border-neutral, ".concat(_colors.N40, ")"),
27
- dark: "var(--ds-border-neutral, ".concat(_colors.DN40, ")")
26
+ light: "var(--ds-border, ".concat(_colors.N40, ")"),
27
+ dark: "var(--ds-border, ".concat(_colors.DN40, ")")
28
28
  };
29
29
  exports.defaultBorderColor = defaultBorderColor;
30
30
  var defaultBorderColorFocus = {
31
- light: "var(--ds-border-focus, ".concat(_colors.B100, ")"),
32
- dark: "var(--ds-border-focus, ".concat(_colors.B75, ")")
31
+ light: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
32
+ dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
33
33
  };
34
34
  exports.defaultBorderColorFocus = defaultBorderColorFocus;
35
35
  var defaultBackgroundColor = {
36
- light: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N10, ")"),
37
- dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.DN10, ")")
36
+ light: "var(--ds-background-neutral, ".concat(_colors.N10, ")"),
37
+ dark: "var(--ds-background-neutral, ".concat(_colors.DN10, ")")
38
38
  };
39
39
  exports.defaultBackgroundColor = defaultBackgroundColor;
40
40
  var defaultBackgroundColorHover = {
41
- light: "var(--ds-background-default, ".concat(_colors.N30, ")"),
42
- dark: "var(--ds-background-default, ".concat(_colors.DN30, ")")
41
+ light: "var(--ds-surface, ".concat(_colors.N30, ")"),
42
+ dark: "var(--ds-surface, ".concat(_colors.DN30, ")")
43
43
  };
44
44
  exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
45
45
  var defaultBackgroundColorFocus = {
46
- light: "var(--ds-background-default, ".concat(_colors.N0, ")"),
47
- dark: "var(--ds-background-default, ".concat(_colors.DN10, ")")
46
+ light: "var(--ds-surface, ".concat(_colors.N0, ")"),
47
+ dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
48
48
  }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
49
49
 
50
50
  exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
51
51
  var subtleHoverBackgroundColor = {
52
- light: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N30, ")"),
53
- dark: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.DN30, ")")
52
+ light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
53
+ dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.DN30, ")")
54
54
  };
55
55
  exports.subtleHoverBackgroundColor = subtleHoverBackgroundColor;
56
56
  var placeholderTextColor = {
57
- light: "var(--ds-text-lowEmphasis, ".concat(_colors.N100, ")"),
58
- dark: "var(--ds-text-lowEmphasis, ".concat(_colors.DN200, ")")
57
+ light: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),
58
+ dark: "var(--ds-text-subtlest, ".concat(_colors.DN200, ")")
59
59
  };
60
60
  exports.placeholderTextColor = placeholderTextColor;
61
61
  var textColor = {
62
- light: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")"),
63
- dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
62
+ light: "var(--ds-text, ".concat(_colors.N900, ")"),
63
+ dark: "var(--ds-text, ".concat(_colors.DN600, ")")
64
64
  };
65
65
  exports.textColor = textColor;
66
66
  var disabledTextColor = {
package/dist/cjs/text-area.js CHANGED
@@ -29,7 +29,7 @@ var _styles = require("./styles");
29
29
 
30
30
  var _theme = require("./theme");
31
31
 
32
- var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "theme", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "tokens"];
32
+ var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "theme", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "tokens", "value"];
33
33
 
34
34
  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); }
35
35
 
@@ -40,7 +40,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
40
40
  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; }
41
41
 
42
42
  var packageName = "@atlaskit/textarea";
43
- var packageVersion = "4.2.5";
43
+ var packageVersion = "4.3.1";
44
44
  var analyticsParams = {
45
45
  componentName: 'textArea',
46
46
  packageName: packageName,
@@ -48,6 +48,8 @@ var analyticsParams = {
48
48
  };
49
49
 
50
50
  var setSmartHeight = function setSmartHeight(el) {
51
+ // Always reset height to auto before calculating new height
52
+ el.style.height = 'auto';
51
53
  var borderHeight = _styles.borderWidth;
52
54
  var paddingBoxHeight = el.scrollHeight;
53
55
  var borderBoxHeight = paddingBoxHeight + borderHeight * 2;
@@ -82,6 +84,7 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
82
84
  onFocus = props.onFocus,
83
85
  onChange = props.onChange,
84
86
  tokens = props.tokens,
87
+ value = props.value,
85
88
  rest = (0, _objectWithoutProperties2.default)(props, _excluded);
86
89
  (0, _react.useEffect)(function () {
87
90
  var el = ourRef.current;
@@ -89,7 +92,7 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
89
92
  if (resize === 'smart' && el) {
90
93
  setSmartHeight(el);
91
94
  }
92
- }, [resize]);
95
+ }, [resize, value]);
93
96
  var onBlurWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
94
97
  fn: function fn(event) {
95
98
  onBlur && onBlur(event);
@@ -120,7 +123,6 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
120
123
  var el = ourRef.current;
121
124
 
122
125
  if (resize === 'smart' && el) {
123
- el.style.height = 'auto';
124
126
  setSmartHeight(el);
125
127
  }
126
128
 
@@ -143,6 +145,7 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
143
145
  var textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
144
146
  (0, _styles.themeStyles)(tokens)];
145
147
  return (0, _core.jsx)("textarea", (0, _extends2.default)({}, controlProps, {
148
+ value: value,
146
149
  disabled: isDisabled,
147
150
  readOnly: isReadOnly,
148
151
  required: isRequired,
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textarea",
3
- "version": "4.2.5",
3
+ "version": "4.3.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/component-tokens.js CHANGED
@@ -8,41 +8,41 @@ export const disabledBorder = {
8
8
  dark: `var(--ds-background-disabled, ${DN40})`
9
9
  };
10
10
  export const invalidBorderColor = {
11
- light: `var(--ds-iconBorder-danger, ${R400})`,
12
- dark: `var(--ds-iconBorder-danger, ${R400})`
11
+ light: `var(--ds-border-danger, ${R400})`,
12
+ dark: `var(--ds-border-danger, ${R400})`
13
13
  };
14
14
  export const defaultBorderColor = {
15
- light: `var(--ds-border-neutral, ${N40})`,
16
- dark: `var(--ds-border-neutral, ${DN40})`
15
+ light: `var(--ds-border, ${N40})`,
16
+ dark: `var(--ds-border, ${DN40})`
17
17
  };
18
18
  export const defaultBorderColorFocus = {
19
- light: `var(--ds-border-focus, ${B100})`,
20
- dark: `var(--ds-border-focus, ${B75})`
19
+ light: `var(--ds-border-focused, ${B100})`,
20
+ dark: `var(--ds-border-focused, ${B75})`
21
21
  };
22
22
  export const defaultBackgroundColor = {
23
- light: `var(--ds-background-subtleNeutral-resting, ${N10})`,
24
- dark: `var(--ds-background-subtleNeutral-resting, ${DN10})`
23
+ light: `var(--ds-background-neutral, ${N10})`,
24
+ dark: `var(--ds-background-neutral, ${DN10})`
25
25
  };
26
26
  export const defaultBackgroundColorHover = {
27
- light: `var(--ds-background-default, ${N30})`,
28
- dark: `var(--ds-background-default, ${DN30})`
27
+ light: `var(--ds-surface, ${N30})`,
28
+ dark: `var(--ds-surface, ${DN30})`
29
29
  };
30
30
  export const defaultBackgroundColorFocus = {
31
- light: `var(--ds-background-default, ${N0})`,
32
- dark: `var(--ds-background-default, ${DN10})`
31
+ light: `var(--ds-surface, ${N0})`,
32
+ dark: `var(--ds-surface, ${DN10})`
33
33
  }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
34
34
 
35
35
  export const subtleHoverBackgroundColor = {
36
- light: `var(--ds-background-transparentNeutral-hover, ${N30})`,
37
- dark: `var(--ds-background-transparentNeutral-hover, ${DN30})`
36
+ light: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
37
+ dark: `var(--ds-background-neutral-subtle-hovered, ${DN30})`
38
38
  };
39
39
  export const placeholderTextColor = {
40
- light: `var(--ds-text-lowEmphasis, ${N100})`,
41
- dark: `var(--ds-text-lowEmphasis, ${DN200})`
40
+ light: `var(--ds-text-subtlest, ${N100})`,
41
+ dark: `var(--ds-text-subtlest, ${DN200})`
42
42
  };
43
43
  export const textColor = {
44
- light: `var(--ds-text-highEmphasis, ${N900})`,
45
- dark: `var(--ds-text-highEmphasis, ${DN600})`
44
+ light: `var(--ds-text, ${N900})`,
45
+ dark: `var(--ds-text, ${DN600})`
46
46
  };
47
47
  export const disabledTextColor = {
48
48
  light: `var(--ds-text-disabled, ${N70})`,
package/dist/es2019/text-area.js CHANGED
@@ -8,7 +8,7 @@ import GlobalTheme from '@atlaskit/theme/components';
8
8
  import { borderWidth, getBaseStyles, themeStyles } from './styles';
9
9
  import { Theme } from './theme';
10
10
  const packageName = "@atlaskit/textarea";
11
- const packageVersion = "4.2.5";
11
+ const packageVersion = "4.3.1";
12
12
  const analyticsParams = {
13
13
  componentName: 'textArea',
14
14
  packageName,
@@ -16,6 +16,8 @@ const analyticsParams = {
16
16
  };
17
17
 
18
18
  const setSmartHeight = el => {
19
+ // Always reset height to auto before calculating new height
20
+ el.style.height = 'auto';
19
21
  const borderHeight = borderWidth;
20
22
  const paddingBoxHeight = el.scrollHeight;
21
23
  const borderBoxHeight = paddingBoxHeight + borderHeight * 2;
@@ -41,6 +43,7 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
41
43
  onFocus,
42
44
  onChange,
43
45
  tokens,
46
+ value,
44
47
  ...rest
45
48
  } = props;
46
49
  useEffect(() => {
@@ -49,7 +52,7 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
49
52
  if (resize === 'smart' && el) {
50
53
  setSmartHeight(el);
51
54
  }
52
- }, [resize]);
55
+ }, [resize, value]);
53
56
  const onBlurWithAnalytics = usePlatformLeafEventHandler({
54
57
  fn: event => {
55
58
  onBlur && onBlur(event);
@@ -82,7 +85,6 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
82
85
  const el = ourRef.current;
83
86
 
84
87
  if (resize === 'smart' && el) {
85
- el.style.height = 'auto';
86
88
  setSmartHeight(el);
87
89
  }
88
90
 
@@ -103,6 +105,7 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
103
105
  const textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
104
106
  themeStyles(tokens)];
105
107
  return jsx("textarea", _extends({}, controlProps, {
108
+ value: value,
106
109
  disabled: isDisabled,
107
110
  readOnly: isReadOnly,
108
111
  required: isRequired,
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textarea",
3
- "version": "4.2.5",
3
+ "version": "4.3.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/component-tokens.js CHANGED
@@ -8,41 +8,41 @@ export var disabledBorder = {
8
8
  dark: "var(--ds-background-disabled, ".concat(DN40, ")")
9
9
  };
10
10
  export var invalidBorderColor = {
11
- light: "var(--ds-iconBorder-danger, ".concat(R400, ")"),
12
- dark: "var(--ds-iconBorder-danger, ".concat(R400, ")")
11
+ light: "var(--ds-border-danger, ".concat(R400, ")"),
12
+ dark: "var(--ds-border-danger, ".concat(R400, ")")
13
13
  };
14
14
  export var defaultBorderColor = {
15
- light: "var(--ds-border-neutral, ".concat(N40, ")"),
16
- dark: "var(--ds-border-neutral, ".concat(DN40, ")")
15
+ light: "var(--ds-border, ".concat(N40, ")"),
16
+ dark: "var(--ds-border, ".concat(DN40, ")")
17
17
  };
18
18
  export var defaultBorderColorFocus = {
19
- light: "var(--ds-border-focus, ".concat(B100, ")"),
20
- dark: "var(--ds-border-focus, ".concat(B75, ")")
19
+ light: "var(--ds-border-focused, ".concat(B100, ")"),
20
+ dark: "var(--ds-border-focused, ".concat(B75, ")")
21
21
  };
22
22
  export var defaultBackgroundColor = {
23
- light: "var(--ds-background-subtleNeutral-resting, ".concat(N10, ")"),
24
- dark: "var(--ds-background-subtleNeutral-resting, ".concat(DN10, ")")
23
+ light: "var(--ds-background-neutral, ".concat(N10, ")"),
24
+ dark: "var(--ds-background-neutral, ".concat(DN10, ")")
25
25
  };
26
26
  export var defaultBackgroundColorHover = {
27
- light: "var(--ds-background-default, ".concat(N30, ")"),
28
- dark: "var(--ds-background-default, ".concat(DN30, ")")
27
+ light: "var(--ds-surface, ".concat(N30, ")"),
28
+ dark: "var(--ds-surface, ".concat(DN30, ")")
29
29
  };
30
30
  export var defaultBackgroundColorFocus = {
31
- light: "var(--ds-background-default, ".concat(N0, ")"),
32
- dark: "var(--ds-background-default, ".concat(DN10, ")")
31
+ light: "var(--ds-surface, ".concat(N0, ")"),
32
+ dark: "var(--ds-surface, ".concat(DN10, ")")
33
33
  }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
34
34
 
35
35
  export var subtleHoverBackgroundColor = {
36
- light: "var(--ds-background-transparentNeutral-hover, ".concat(N30, ")"),
37
- dark: "var(--ds-background-transparentNeutral-hover, ".concat(DN30, ")")
36
+ light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
37
+ dark: "var(--ds-background-neutral-subtle-hovered, ".concat(DN30, ")")
38
38
  };
39
39
  export var placeholderTextColor = {
40
- light: "var(--ds-text-lowEmphasis, ".concat(N100, ")"),
41
- dark: "var(--ds-text-lowEmphasis, ".concat(DN200, ")")
40
+ light: "var(--ds-text-subtlest, ".concat(N100, ")"),
41
+ dark: "var(--ds-text-subtlest, ".concat(DN200, ")")
42
42
  };
43
43
  export var textColor = {
44
- light: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
45
- dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
44
+ light: "var(--ds-text, ".concat(N900, ")"),
45
+ dark: "var(--ds-text, ".concat(DN600, ")")
46
46
  };
47
47
  export var disabledTextColor = {
48
48
  light: "var(--ds-text-disabled, ".concat(N70, ")"),
package/dist/esm/text-area.js CHANGED
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _typeof from "@babel/runtime/helpers/typeof";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "theme", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "tokens"];
5
+ var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "theme", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "tokens", "value"];
6
6
 
7
7
  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; }
8
8
 
@@ -16,7 +16,7 @@ import GlobalTheme from '@atlaskit/theme/components';
16
16
  import { borderWidth, getBaseStyles, themeStyles } from './styles';
17
17
  import { Theme } from './theme';
18
18
  var packageName = "@atlaskit/textarea";
19
- var packageVersion = "4.2.5";
19
+ var packageVersion = "4.3.1";
20
20
  var analyticsParams = {
21
21
  componentName: 'textArea',
22
22
  packageName: packageName,
@@ -24,6 +24,8 @@ var analyticsParams = {
24
24
  };
25
25
 
26
26
  var setSmartHeight = function setSmartHeight(el) {
27
+ // Always reset height to auto before calculating new height
28
+ el.style.height = 'auto';
27
29
  var borderHeight = borderWidth;
28
30
  var paddingBoxHeight = el.scrollHeight;
29
31
  var borderBoxHeight = paddingBoxHeight + borderHeight * 2;
@@ -59,6 +61,7 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
59
61
  onFocus = props.onFocus,
60
62
  onChange = props.onChange,
61
63
  tokens = props.tokens,
64
+ value = props.value,
62
65
  rest = _objectWithoutProperties(props, _excluded);
63
66
 
64
67
  useEffect(function () {
@@ -67,7 +70,7 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
67
70
  if (resize === 'smart' && el) {
68
71
  setSmartHeight(el);
69
72
  }
70
- }, [resize]);
73
+ }, [resize, value]);
71
74
  var onBlurWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
72
75
  fn: function fn(event) {
73
76
  onBlur && onBlur(event);
@@ -98,7 +101,6 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
98
101
  var el = ourRef.current;
99
102
 
100
103
  if (resize === 'smart' && el) {
101
- el.style.height = 'auto';
102
104
  setSmartHeight(el);
103
105
  }
104
106
 
@@ -121,6 +123,7 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
121
123
  var textAreaStyles = [baseStyles, // not memoizing themeStyles as `tokens` is an unstable reference
122
124
  themeStyles(tokens)];
123
125
  return jsx("textarea", _extends({}, controlProps, {
126
+ value: value,
124
127
  disabled: isDisabled,
125
128
  readOnly: isReadOnly,
126
129
  required: isRequired,
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textarea",
3
- "version": "4.2.5",
3
+ "version": "4.3.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/component-tokens.d.ts CHANGED
@@ -7,40 +7,40 @@ export declare const disabledBorder: {
7
7
  dark: "var(--ds-background-disabled)";
8
8
  };
9
9
  export declare const invalidBorderColor: {
10
- light: "var(--ds-iconBorder-danger)";
11
- dark: "var(--ds-iconBorder-danger)";
10
+ light: "var(--ds-border-danger)";
11
+ dark: "var(--ds-border-danger)";
12
12
  };
13
13
  export declare const defaultBorderColor: {
14
- light: "var(--ds-border-neutral)";
15
- dark: "var(--ds-border-neutral)";
14
+ light: "var(--ds-border)";
15
+ dark: "var(--ds-border)";
16
16
  };
17
17
  export declare const defaultBorderColorFocus: {
18
- light: "var(--ds-border-focus)";
19
- dark: "var(--ds-border-focus)";
18
+ light: "var(--ds-border-focused)";
19
+ dark: "var(--ds-border-focused)";
20
20
  };
21
21
  export declare const defaultBackgroundColor: {
22
- light: "var(--ds-background-subtleNeutral-resting)";
23
- dark: "var(--ds-background-subtleNeutral-resting)";
22
+ light: "var(--ds-background-neutral)";
23
+ dark: "var(--ds-background-neutral)";
24
24
  };
25
25
  export declare const defaultBackgroundColorHover: {
26
- light: "var(--ds-background-default)";
27
- dark: "var(--ds-background-default)";
26
+ light: "var(--ds-surface)";
27
+ dark: "var(--ds-surface)";
28
28
  };
29
29
  export declare const defaultBackgroundColorFocus: {
30
- light: "var(--ds-background-default)";
31
- dark: "var(--ds-background-default)";
30
+ light: "var(--ds-surface)";
31
+ dark: "var(--ds-surface)";
32
32
  };
33
33
  export declare const subtleHoverBackgroundColor: {
34
- light: "var(--ds-background-transparentNeutral-hover)";
35
- dark: "var(--ds-background-transparentNeutral-hover)";
34
+ light: "var(--ds-background-neutral-subtle-hovered)";
35
+ dark: "var(--ds-background-neutral-subtle-hovered)";
36
36
  };
37
37
  export declare const placeholderTextColor: {
38
- light: "var(--ds-text-lowEmphasis)";
39
- dark: "var(--ds-text-lowEmphasis)";
38
+ light: "var(--ds-text-subtlest)";
39
+ dark: "var(--ds-text-subtlest)";
40
40
  };
41
41
  export declare const textColor: {
42
- light: "var(--ds-text-highEmphasis)";
43
- dark: "var(--ds-text-highEmphasis)";
42
+ light: "var(--ds-text)";
43
+ dark: "var(--ds-text)";
44
44
  };
45
45
  export declare const disabledTextColor: {
46
46
  light: "var(--ds-text-disabled)";
package/dist/types/theme.d.ts CHANGED
@@ -31,8 +31,8 @@ export declare type ThemeTokens = {
31
31
  export declare const themeTokens: {
32
32
  borderColor: {
33
33
  standard: {
34
- light: "var(--ds-border-neutral)";
35
- dark: "var(--ds-border-neutral)";
34
+ light: "var(--ds-border)";
35
+ dark: "var(--ds-border)";
36
36
  };
37
37
  subtle: {
38
38
  light: string;
@@ -45,12 +45,12 @@ export declare const themeTokens: {
45
45
  };
46
46
  borderColorFocus: {
47
47
  standard: {
48
- light: "var(--ds-border-focus)";
49
- dark: "var(--ds-border-focus)";
48
+ light: "var(--ds-border-focused)";
49
+ dark: "var(--ds-border-focused)";
50
50
  };
51
51
  subtle: {
52
- light: "var(--ds-border-focus)";
53
- dark: "var(--ds-border-focus)";
52
+ light: "var(--ds-border-focused)";
53
+ dark: "var(--ds-border-focused)";
54
54
  };
55
55
  none: {
56
56
  light: string;
@@ -59,8 +59,8 @@ export declare const themeTokens: {
59
59
  };
60
60
  backgroundColor: {
61
61
  standard: {
62
- light: "var(--ds-background-subtleNeutral-resting)";
63
- dark: "var(--ds-background-subtleNeutral-resting)";
62
+ light: "var(--ds-background-neutral)";
63
+ dark: "var(--ds-background-neutral)";
64
64
  };
65
65
  subtle: {
66
66
  light: string;
@@ -73,12 +73,12 @@ export declare const themeTokens: {
73
73
  };
74
74
  backgroundColorFocus: {
75
75
  standard: {
76
- light: "var(--ds-background-default)";
77
- dark: "var(--ds-background-default)";
76
+ light: "var(--ds-surface)";
77
+ dark: "var(--ds-surface)";
78
78
  };
79
79
  subtle: {
80
- light: "var(--ds-background-default)";
81
- dark: "var(--ds-background-default)";
80
+ light: "var(--ds-surface)";
81
+ dark: "var(--ds-surface)";
82
82
  };
83
83
  none: {
84
84
  light: string;
@@ -87,12 +87,12 @@ export declare const themeTokens: {
87
87
  };
88
88
  backgroundColorHover: {
89
89
  standard: {
90
- light: "var(--ds-background-default)";
91
- dark: "var(--ds-background-default)";
90
+ light: "var(--ds-surface)";
91
+ dark: "var(--ds-surface)";
92
92
  };
93
93
  subtle: {
94
- light: "var(--ds-background-transparentNeutral-hover)";
95
- dark: "var(--ds-background-transparentNeutral-hover)";
94
+ light: "var(--ds-background-neutral-subtle-hovered)";
95
+ dark: "var(--ds-background-neutral-subtle-hovered)";
96
96
  };
97
97
  none: {
98
98
  light: string;
@@ -105,7 +105,7 @@ export declare const themeTokens: {
105
105
  backgroundColorFocus: "var(--ds-background-disabled)";
106
106
  backgroundColorHover: "var(--ds-background-disabled)";
107
107
  borderColor: "var(--ds-background-disabled)";
108
- borderColorFocus: "var(--ds-border-focus)";
108
+ borderColorFocus: "var(--ds-border-focused)";
109
109
  textColor: "var(--ds-text-disabled)";
110
110
  };
111
111
  dark: {
@@ -113,33 +113,33 @@ export declare const themeTokens: {
113
113
  backgroundColorFocus: "var(--ds-background-disabled)";
114
114
  backgroundColorHover: "var(--ds-background-disabled)";
115
115
  borderColor: "var(--ds-background-disabled)";
116
- borderColorFocus: "var(--ds-border-focus)";
116
+ borderColorFocus: "var(--ds-border-focused)";
117
117
  textColor: "var(--ds-text-disabled)";
118
118
  };
119
119
  };
120
120
  invalidRules: {
121
121
  light: {
122
- borderColor: "var(--ds-iconBorder-danger)";
123
- borderColorFocus: "var(--ds-border-focus)";
124
- backgroundColor: "var(--ds-background-subtleNeutral-resting)";
125
- backgroundColorFocus: "var(--ds-background-default)";
126
- backgroundColorHover: "var(--ds-background-default)";
122
+ borderColor: "var(--ds-border-danger)";
123
+ borderColorFocus: "var(--ds-border-focused)";
124
+ backgroundColor: "var(--ds-background-neutral)";
125
+ backgroundColorFocus: "var(--ds-surface)";
126
+ backgroundColorHover: "var(--ds-surface)";
127
127
  };
128
128
  dark: {
129
- borderColor: "var(--ds-iconBorder-danger)";
130
- borderColorFocus: "var(--ds-border-focus)";
131
- backgroundColor: "var(--ds-background-subtleNeutral-resting)";
132
- backgroundColorFocus: "var(--ds-background-default)";
133
- backgroundColorHover: "var(--ds-background-default)";
129
+ borderColor: "var(--ds-border-danger)";
130
+ borderColorFocus: "var(--ds-border-focused)";
131
+ backgroundColor: "var(--ds-background-neutral)";
132
+ backgroundColorFocus: "var(--ds-surface)";
133
+ backgroundColorHover: "var(--ds-surface)";
134
134
  };
135
135
  };
136
136
  textColor: {
137
- light: "var(--ds-text-highEmphasis)";
138
- dark: "var(--ds-text-highEmphasis)";
137
+ light: "var(--ds-text)";
138
+ dark: "var(--ds-text)";
139
139
  };
140
140
  placeholderTextColor: {
141
- light: "var(--ds-text-lowEmphasis)";
142
- dark: "var(--ds-text-lowEmphasis)";
141
+ light: "var(--ds-text-subtlest)";
142
+ dark: "var(--ds-text-subtlest)";
143
143
  };
144
144
  };
145
145
  export declare const Theme: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textarea",
3
- "version": "4.2.5",
3
+ "version": "4.3.1",
4
4
  "description": "A text area lets users enter long form text which spans over multiple lines.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
26
26
  "dependencies": {
27
27
  "@atlaskit/analytics-next": "^8.0.0",
28
28
  "@atlaskit/theme": "^12.1.0",
29
- "@atlaskit/tokens": "^0.5.0",
29
+ "@atlaskit/tokens": "^0.7.0",
30
30
  "@babel/runtime": "^7.0.0",
31
31
  "@emotion/core": "^10.0.9"
32
32
  },
@@ -34,9 +34,9 @@
34
34
  "react": "^16.8.0"
35
35
  },
36
36
  "devDependencies": {
37
- "@atlaskit/button": "^16.1.0",
37
+ "@atlaskit/button": "^16.2.0",
38
38
  "@atlaskit/docs": "*",
39
- "@atlaskit/form": "^8.4.0",
39
+ "@atlaskit/form": "^8.5.0",
40
40
  "@atlaskit/section-message": "^6.1.0",
41
41
  "@atlaskit/ssr": "*",
42
42
  "@atlaskit/visual-regression": "*",