@atlaskit/textarea 8.1.0 → 8.2.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 (8) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/text-area.compiled.css +13 -12
  3. package/dist/cjs/text-area.js +7 -5
  4. package/dist/es2019/text-area.compiled.css +13 -12
  5. package/dist/es2019/text-area.js +7 -5
  6. package/dist/esm/text-area.compiled.css +13 -12
  7. package/dist/esm/text-area.js +7 -5
  8. package/package.json +13 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/textarea
2
2
 
3
+ ## 8.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 8.2.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`b867e641d818d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b867e641d818d) -
14
+ Updated border radius values behind a feature gate `platform-dst-shape-theme-default`.
15
+
3
16
  ## 8.1.0
4
17
 
5
18
  ### Minor Changes
package/dist/cjs/text-area.compiled.css CHANGED
@@ -1,5 +1,6 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
+ ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
3
4
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
4
5
  ._v5641gs0{transition:var(--_19uzta9)}
5
6
  ._153gksl0[data-invalid]:not(:focus){border-color:var(--_1u9fbts)}
@@ -12,35 +13,34 @@
12
13
  ._1fraksl0:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--_1u9fbts)}
13
14
  ._kp821j28:not(:focus){border-color:transparent}
14
15
  ._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
16
+ ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
15
17
  ._12ji1r31{outline-color:currentColor}
16
18
  ._12y31o36{outline-width:medium}
17
19
  ._12ym1j28:hover:not(:read-only):not(:focus){background-color:transparent}
18
20
  ._12yml4ek:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f8f8f8)}
19
21
  ._13xeglyw:invalid{box-shadow:none}
22
+ ._141f12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}
23
+ ._141f1v6z[data-compact]{padding-inline-start:7px}
24
+ ._14ji12x7:not([data-compact]){padding-block-end:var(--ds-space-075,6px)}
20
25
  ._14zg1e08{resize:horizontal}
21
26
  ._14zg1e54{resize:vertical}
22
27
  ._14zg1hrf{resize:both}
23
28
  ._14zgglyw{resize:none}
24
29
  ._16jlkb7n{flex-grow:1}
25
30
  ._16lw1cn1:not([data-compact]){min-height:var(--_n9nqvh)}
26
- ._17km12x7:not([data-compact]){padding-left:var(--ds-space-075,6px)}
27
- ._17km1v6z:not([data-compact]){padding-left:7px}
28
31
  ._18m91wug{overflow-y:auto}
29
32
  ._18u0idpf{margin-left:0}
30
33
  ._19k01ouc:hover:not(:read-only):not(:focus):disabled{background-color:var(--_r5pknd)}
31
34
  ._19pkidpf{margin-top:0}
32
- ._19qkv77o[data-compact]{padding-top:var(--ds-space-025,2px)}
33
35
  ._1a2sh9qi[data-invalid]:not(:focus){box-shadow:var(--_1l1juom)}
34
- ._1a4912x7:not([data-compact]){padding-bottom:var(--ds-space-075,6px)}
35
36
  ._1bsb1osq{width:100%}
36
- ._1dbiv77o[data-compact]{padding-bottom:var(--ds-space-025,2px)}
37
37
  ._1e0c1ule{display:block}
38
- ._1etu12x7[data-compact]{padding-left:var(--ds-space-075,6px)}
39
- ._1etu1v6z[data-compact]{padding-left:7px}
40
38
  ._1goxglyw::-ms-clear{display:none}
41
39
  ._1idrpsu8::-ms-input-placeholder{color:var(--_vrm7dk)}
42
40
  ._1idrpsu8::placeholder{color:var(--_vrm7dk)}
43
- ._1itd12x7:not([data-compact]){padding-top:var(--ds-space-075,6px)}
41
+ ._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
42
+ ._1kod1v6z:not([data-compact]){padding-inline-end:7px}
43
+ ._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
44
44
  ._1lephxcb:disabled::-ms-input-placeholder{color:var(--_dnrmjm)}
45
45
  ._1lephxcb:disabled::placeholder{color:var(--_dnrmjm)}
46
46
  ._1ltx1j28:not(:focus){background-color:transparent}
@@ -52,7 +52,11 @@
52
52
  ._1ul9idpf{min-width:0}
53
53
  ._2hwxidpf{margin-right:0}
54
54
  ._6zpvh9qi:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:var(--_1l1juom)}
55
+ ._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
56
+ ._7ba01v6z:not([data-compact]){padding-inline-start:7px}
55
57
  ._cfjqkb7n:disabled{-webkit-opacity:1}
58
+ ._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
59
+ ._daj71v6z[data-compact]{padding-inline-end:7px}
56
60
  ._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
57
61
  ._i0dl1osq{flex-basis:100%}
58
62
  ._ibjd12ci:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--_1z08gfx)}
@@ -60,6 +64,7 @@
60
64
  ._k3o7n7od:disabled{-webkit-text-fill-color:unset}
61
65
  ._kqswh2mm{position:relative}
62
66
  ._nmhq1fiz[data-compact]{line-height:1.1428571428571428}
67
+ ._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
63
68
  ._otyridpf{margin-bottom:0}
64
69
  ._p12f1osq{max-width:100%}
65
70
  ._slp31hna{word-wrap:break-word}
@@ -68,11 +73,7 @@
68
73
  ._uzq71d1b[data-compact]{min-height:var(--_dqsusn)}
69
74
  ._vbqbhxcb:disabled{color:var(--_dnrmjm)}
70
75
  ._vchhusvi{box-sizing:border-box}
71
- ._wg6012x7:not([data-compact]){padding-right:var(--ds-space-075,6px)}
72
- ._wg601v6z:not([data-compact]){padding-right:7px}
73
76
  ._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
74
- ._zedr12x7[data-compact]{padding-right:var(--ds-space-075,6px)}
75
- ._zedr1v6z[data-compact]{padding-right:7px}
76
77
  ._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
77
78
  ._1luh3zdg[data-invalid]:focus{border-color:var(--_xjqa3d)}
78
79
  ._858u1j28:focus{border-color:transparent}
package/dist/cjs/text-area.js CHANGED
@@ -15,13 +15,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
15
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
16
16
  var _react = _interopRequireWildcard(require("react"));
17
17
  var _analyticsNext = require("@atlaskit/analytics-next");
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
19
  var _colors = require("@atlaskit/theme/colors");
19
20
  var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value", "style"];
20
21
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
21
22
  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; }
22
23
  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; }
23
24
  var packageName = "@atlaskit/textarea";
24
- var packageVersion = "8.0.14";
25
+ var packageVersion = "8.2.0";
25
26
  var analyticsParams = {
26
27
  componentName: 'textArea',
27
28
  packageName: packageName,
@@ -34,10 +35,11 @@ var verticalPadding = 6;
34
35
  var transitionDuration = '0.2s';
35
36
  var borderWidth = 2;
36
37
  var baseStyles = null;
38
+ var baseStylesT26Shape = null;
37
39
  var appearanceStyles = {
38
- standard: "_1dqonqa1 _kp82rsbi _1ltx1j9a _1bqsbk0g _z1pvby5v _19wtrsbi _12yml4ek _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _17km1v6z _wg601v6z _858u1v1w _jomrr01l _7ehivyy1 _186j1v1w _qu18by5v",
39
- subtle: "_1dqonqa1 _kp821j28 _1ltx1j28 _19wtrsbi _12yml4ek _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _wg601v6z _17km1v6z _858u1v1w _jomrr01l _7ehivyy1",
40
- none: "_1dqoglyw _kp821j28 _1ltx1j28 _19wt1j28 _12ym1j28 _19qkv77o _zedr12x7 _1dbiv77o _1etu12x7 _1itd12x7 _wg6012x7 _1a4912x7 _17km12x7 _858u1j28 _jomr1j28 _7ehi3sij"
40
+ standard: "_1dqonqa1 _kp82rsbi _1ltx1j9a _1bqsbk0g _z1pvby5v _19wtrsbi _12yml4ek _1l02v77o _11zpv77o _141f1v6z _daj71v6z _olc612x7 _14ji12x7 _7ba01v6z _1kod1v6z _858u1v1w _jomrr01l _7ehivyy1 _186j1v1w _qu18by5v",
41
+ subtle: "_1dqonqa1 _kp821j28 _1ltx1j28 _19wtrsbi _12yml4ek _1l02v77o _11zpv77o _141f1v6z _daj71v6z _olc612x7 _14ji12x7 _1kod1v6z _7ba01v6z _858u1v1w _jomrr01l _7ehivyy1",
42
+ none: "_1dqoglyw _kp821j28 _1ltx1j28 _19wt1j28 _12ym1j28 _1l02v77o _daj712x7 _11zpv77o _141f12x7 _olc612x7 _1kod12x7 _14ji12x7 _7ba012x7 _858u1j28 _jomr1j28 _7ehi3sij"
41
43
  };
42
44
 
43
45
  // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
@@ -148,7 +150,7 @@ var InnerTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
148
150
  onFocus: onFocusWithAnalytics,
149
151
  rows: minimumRows
150
152
  }, rest, {
151
- className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c82smr _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazovqm _slp31hna _153gksl0 _usy41kd8 _1a2sh9qi _vbqbhxcb _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fraksl0 _ibjd12ci _6zpvh9qi _19k01ouc _1idrpsu8 _1lephxcb _nmhq1fiz _1n388sxn _1luh3zdg _ndzbkwt5 _1vj0119y", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
153
+ className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c82smr _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazovqm _slp31hna _153gksl0 _usy41kd8 _1a2sh9qi _vbqbhxcb _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fraksl0 _ibjd12ci _6zpvh9qi _19k01ouc _1idrpsu8 _1lephxcb _nmhq1fiz _1n388sxn _1luh3zdg _ndzbkwt5 _1vj0119y", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
152
154
  style: _objectSpread(_objectSpread({}, style), {}, {
153
155
  maxHeight: maxHeight,
154
156
  "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
package/dist/es2019/text-area.compiled.css CHANGED
@@ -1,5 +1,6 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
+ ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
3
4
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
4
5
  ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
5
6
  ._153g78r2[data-invalid]:not(:focus){border-color:var(--ds-border-danger,#de350b)}
@@ -12,35 +13,34 @@
12
13
  ._1fra78r2:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--ds-border-danger,#de350b)}
13
14
  ._kp821j28:not(:focus){border-color:transparent}
14
15
  ._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
16
+ ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
15
17
  ._12ji1r31{outline-color:currentColor}
16
18
  ._12y31o36{outline-width:medium}
17
19
  ._12ym1j28:hover:not(:read-only):not(:focus){background-color:transparent}
18
20
  ._12yml4ek:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f8f8f8)}
19
21
  ._13xeglyw:invalid{box-shadow:none}
22
+ ._141f12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}
23
+ ._141f1v6z[data-compact]{padding-inline-start:7px}
24
+ ._14ji12x7:not([data-compact]){padding-block-end:var(--ds-space-075,6px)}
20
25
  ._14zg1e08{resize:horizontal}
21
26
  ._14zg1e54{resize:vertical}
22
27
  ._14zg1hrf{resize:both}
23
28
  ._14zgglyw{resize:none}
24
29
  ._16jlkb7n{flex-grow:1}
25
30
  ._16lwuel1:not([data-compact]){min-height:var(--_eorxnz)}
26
- ._17km12x7:not([data-compact]){padding-left:var(--ds-space-075,6px)}
27
- ._17km1v6z:not([data-compact]){padding-left:7px}
28
31
  ._18m91wug{overflow-y:auto}
29
32
  ._18u0idpf{margin-left:0}
30
33
  ._19k01y1w:hover:not(:read-only):not(:focus):disabled{background-color:var(--ds-background-disabled,#f4f5f7)}
31
34
  ._19pkidpf{margin-top:0}
32
- ._19qkv77o[data-compact]{padding-top:var(--ds-space-025,2px)}
33
35
  ._1a2sr6rt[data-invalid]:not(:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#de350b)}
34
- ._1a4912x7:not([data-compact]){padding-bottom:var(--ds-space-075,6px)}
35
36
  ._1bsb1osq{width:100%}
36
- ._1dbiv77o[data-compact]{padding-bottom:var(--ds-space-025,2px)}
37
37
  ._1e0c1ule{display:block}
38
- ._1etu12x7[data-compact]{padding-left:var(--ds-space-075,6px)}
39
- ._1etu1v6z[data-compact]{padding-left:7px}
40
38
  ._1goxglyw::-ms-clear{display:none}
41
39
  ._1idr1wmz::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b778c)}
42
40
  ._1idr1wmz::placeholder{color:var(--ds-text-subtlest,#6b778c)}
43
- ._1itd12x7:not([data-compact]){padding-top:var(--ds-space-075,6px)}
41
+ ._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
42
+ ._1kod1v6z:not([data-compact]){padding-inline-end:7px}
43
+ ._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
44
44
  ._1lep9jg2:disabled::-ms-input-placeholder{color:var(--ds-text-disabled,#a5adba)}
45
45
  ._1lep9jg2:disabled::placeholder{color:var(--ds-text-disabled,#a5adba)}
46
46
  ._1ltx1j28:not(:focus){background-color:transparent}
@@ -52,7 +52,11 @@
52
52
  ._1ul9idpf{min-width:0}
53
53
  ._2hwxidpf{margin-right:0}
54
54
  ._6zpvr6rt:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#de350b)}
55
+ ._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
56
+ ._7ba01v6z:not([data-compact]){padding-inline-start:7px}
55
57
  ._cfjqkb7n:disabled{-webkit-opacity:1}
58
+ ._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
59
+ ._daj71v6z[data-compact]{padding-inline-end:7px}
56
60
  ._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
57
61
  ._i0dl1osq{flex-basis:100%}
58
62
  ._ibjd10ko:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--ds-background-input-hovered,#ebecf0)}
@@ -60,6 +64,7 @@
60
64
  ._k3o7n7od:disabled{-webkit-text-fill-color:unset}
61
65
  ._kqswh2mm{position:relative}
62
66
  ._nmhq1fiz[data-compact]{line-height:1.1428571428571428}
67
+ ._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
63
68
  ._otyridpf{margin-bottom:0}
64
69
  ._p12f1osq{max-width:100%}
65
70
  ._slp31hna{word-wrap:break-word}
@@ -68,11 +73,7 @@
68
73
  ._uzq71i7i[data-compact]{min-height:var(--_6ny3x7)}
69
74
  ._vbqb9jg2:disabled{color:var(--ds-text-disabled,#a5adba)}
70
75
  ._vchhusvi{box-sizing:border-box}
71
- ._wg6012x7:not([data-compact]){padding-right:var(--ds-space-075,6px)}
72
- ._wg601v6z:not([data-compact]){padding-right:7px}
73
76
  ._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
74
- ._zedr12x7[data-compact]{padding-right:var(--ds-space-075,6px)}
75
- ._zedr1v6z[data-compact]{padding-right:7px}
76
77
  ._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
77
78
  ._1luh194a[data-invalid]:focus{border-color:var(--ds-border-focused,#2684ff)}
78
79
  ._858u1j28:focus{border-color:transparent}
package/dist/es2019/text-area.js CHANGED
@@ -4,9 +4,10 @@ import "./text-area.compiled.css";
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
6
6
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
7
+ import { fg } from '@atlaskit/platform-feature-flags';
7
8
  import { B200, N0, N10, N20, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
8
9
  const packageName = "@atlaskit/textarea";
9
- const packageVersion = "8.0.14";
10
+ const packageVersion = "8.2.0";
10
11
  const analyticsParams = {
11
12
  componentName: 'textArea',
12
13
  packageName,
@@ -19,10 +20,11 @@ const verticalPadding = 6;
19
20
  const transitionDuration = '0.2s';
20
21
  const borderWidth = 2;
21
22
  const baseStyles = null;
23
+ const baseStylesT26Shape = null;
22
24
  const appearanceStyles = {
23
- standard: "_1dqonqa1 _kp82rsbi _1ltx1j9a _1bqsbk0g _z1pvby5v _19wtrsbi _12yml4ek _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _17km1v6z _wg601v6z _858u1v1w _jomrr01l _7ehivyy1 _186j1v1w _qu18by5v",
24
- subtle: "_1dqonqa1 _kp821j28 _1ltx1j28 _19wtrsbi _12yml4ek _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _wg601v6z _17km1v6z _858u1v1w _jomrr01l _7ehivyy1",
25
- none: "_1dqoglyw _kp821j28 _1ltx1j28 _19wt1j28 _12ym1j28 _19qkv77o _zedr12x7 _1dbiv77o _1etu12x7 _1itd12x7 _wg6012x7 _1a4912x7 _17km12x7 _858u1j28 _jomr1j28 _7ehi3sij"
25
+ standard: "_1dqonqa1 _kp82rsbi _1ltx1j9a _1bqsbk0g _z1pvby5v _19wtrsbi _12yml4ek _1l02v77o _11zpv77o _141f1v6z _daj71v6z _olc612x7 _14ji12x7 _7ba01v6z _1kod1v6z _858u1v1w _jomrr01l _7ehivyy1 _186j1v1w _qu18by5v",
26
+ subtle: "_1dqonqa1 _kp821j28 _1ltx1j28 _19wtrsbi _12yml4ek _1l02v77o _11zpv77o _141f1v6z _daj71v6z _olc612x7 _14ji12x7 _1kod1v6z _7ba01v6z _858u1v1w _jomrr01l _7ehivyy1",
27
+ none: "_1dqoglyw _kp821j28 _1ltx1j28 _19wt1j28 _12ym1j28 _1l02v77o _daj712x7 _11zpv77o _141f12x7 _olc612x7 _1kod12x7 _14ji12x7 _7ba012x7 _858u1j28 _jomr1j28 _7ehi3sij"
26
28
  };
27
29
 
28
30
  // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
@@ -125,7 +127,7 @@ const InnerTextArea = /*#__PURE__*/forwardRef((props, ref) => {
125
127
  onFocus: onFocusWithAnalytics,
126
128
  rows: minimumRows
127
129
  }, rest, {
128
- className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c82smr _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v564r5cv _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazj3m3 _slp31hna _153g78r2 _usy4mag2 _1a2sr6rt _vbqb9jg2 _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra78r2 _ibjd10ko _6zpvr6rt _19k01y1w _1idr1wmz _1lep9jg2 _nmhq1fiz _1n388sxn _1luh194a _ndzbr01l _1vj01cu8", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71i7i _16lwuel1"]),
130
+ className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c82smr _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v564r5cv _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazj3m3 _slp31hna _153g78r2 _usy4mag2 _1a2sr6rt _vbqb9jg2 _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra78r2 _ibjd10ko _6zpvr6rt _19k01y1w _1idr1wmz _1lep9jg2 _nmhq1fiz _1n388sxn _1luh194a _ndzbr01l _1vj01cu8", fg('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71i7i _16lwuel1"]),
129
131
  style: {
130
132
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
131
133
  ...style,
package/dist/esm/text-area.compiled.css CHANGED
@@ -1,5 +1,6 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
+ ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
3
4
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
4
5
  ._v5641gs0{transition:var(--_19uzta9)}
5
6
  ._153gksl0[data-invalid]:not(:focus){border-color:var(--_1u9fbts)}
@@ -12,35 +13,34 @@
12
13
  ._1fraksl0:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--_1u9fbts)}
13
14
  ._kp821j28:not(:focus){border-color:transparent}
14
15
  ._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
16
+ ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
15
17
  ._12ji1r31{outline-color:currentColor}
16
18
  ._12y31o36{outline-width:medium}
17
19
  ._12ym1j28:hover:not(:read-only):not(:focus){background-color:transparent}
18
20
  ._12yml4ek:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f8f8f8)}
19
21
  ._13xeglyw:invalid{box-shadow:none}
22
+ ._141f12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}
23
+ ._141f1v6z[data-compact]{padding-inline-start:7px}
24
+ ._14ji12x7:not([data-compact]){padding-block-end:var(--ds-space-075,6px)}
20
25
  ._14zg1e08{resize:horizontal}
21
26
  ._14zg1e54{resize:vertical}
22
27
  ._14zg1hrf{resize:both}
23
28
  ._14zgglyw{resize:none}
24
29
  ._16jlkb7n{flex-grow:1}
25
30
  ._16lw1cn1:not([data-compact]){min-height:var(--_n9nqvh)}
26
- ._17km12x7:not([data-compact]){padding-left:var(--ds-space-075,6px)}
27
- ._17km1v6z:not([data-compact]){padding-left:7px}
28
31
  ._18m91wug{overflow-y:auto}
29
32
  ._18u0idpf{margin-left:0}
30
33
  ._19k01ouc:hover:not(:read-only):not(:focus):disabled{background-color:var(--_r5pknd)}
31
34
  ._19pkidpf{margin-top:0}
32
- ._19qkv77o[data-compact]{padding-top:var(--ds-space-025,2px)}
33
35
  ._1a2sh9qi[data-invalid]:not(:focus){box-shadow:var(--_1l1juom)}
34
- ._1a4912x7:not([data-compact]){padding-bottom:var(--ds-space-075,6px)}
35
36
  ._1bsb1osq{width:100%}
36
- ._1dbiv77o[data-compact]{padding-bottom:var(--ds-space-025,2px)}
37
37
  ._1e0c1ule{display:block}
38
- ._1etu12x7[data-compact]{padding-left:var(--ds-space-075,6px)}
39
- ._1etu1v6z[data-compact]{padding-left:7px}
40
38
  ._1goxglyw::-ms-clear{display:none}
41
39
  ._1idrpsu8::-ms-input-placeholder{color:var(--_vrm7dk)}
42
40
  ._1idrpsu8::placeholder{color:var(--_vrm7dk)}
43
- ._1itd12x7:not([data-compact]){padding-top:var(--ds-space-075,6px)}
41
+ ._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
42
+ ._1kod1v6z:not([data-compact]){padding-inline-end:7px}
43
+ ._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
44
44
  ._1lephxcb:disabled::-ms-input-placeholder{color:var(--_dnrmjm)}
45
45
  ._1lephxcb:disabled::placeholder{color:var(--_dnrmjm)}
46
46
  ._1ltx1j28:not(:focus){background-color:transparent}
@@ -52,7 +52,11 @@
52
52
  ._1ul9idpf{min-width:0}
53
53
  ._2hwxidpf{margin-right:0}
54
54
  ._6zpvh9qi:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:var(--_1l1juom)}
55
+ ._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
56
+ ._7ba01v6z:not([data-compact]){padding-inline-start:7px}
55
57
  ._cfjqkb7n:disabled{-webkit-opacity:1}
58
+ ._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
59
+ ._daj71v6z[data-compact]{padding-inline-end:7px}
56
60
  ._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
57
61
  ._i0dl1osq{flex-basis:100%}
58
62
  ._ibjd12ci:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--_1z08gfx)}
@@ -60,6 +64,7 @@
60
64
  ._k3o7n7od:disabled{-webkit-text-fill-color:unset}
61
65
  ._kqswh2mm{position:relative}
62
66
  ._nmhq1fiz[data-compact]{line-height:1.1428571428571428}
67
+ ._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
63
68
  ._otyridpf{margin-bottom:0}
64
69
  ._p12f1osq{max-width:100%}
65
70
  ._slp31hna{word-wrap:break-word}
@@ -68,11 +73,7 @@
68
73
  ._uzq71d1b[data-compact]{min-height:var(--_dqsusn)}
69
74
  ._vbqbhxcb:disabled{color:var(--_dnrmjm)}
70
75
  ._vchhusvi{box-sizing:border-box}
71
- ._wg6012x7:not([data-compact]){padding-right:var(--ds-space-075,6px)}
72
- ._wg601v6z:not([data-compact]){padding-right:7px}
73
76
  ._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
74
- ._zedr12x7[data-compact]{padding-right:var(--ds-space-075,6px)}
75
- ._zedr1v6z[data-compact]{padding-right:7px}
76
77
  ._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
77
78
  ._1luh3zdg[data-invalid]:focus{border-color:var(--_xjqa3d)}
78
79
  ._858u1j28:focus{border-color:transparent}
package/dist/esm/text-area.js CHANGED
@@ -10,9 +10,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
10
10
  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) { _defineProperty(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; }
11
11
  import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
12
12
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
13
14
  import { B200, N0, N10, N20, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
14
15
  var packageName = "@atlaskit/textarea";
15
- var packageVersion = "8.0.14";
16
+ var packageVersion = "8.2.0";
16
17
  var analyticsParams = {
17
18
  componentName: 'textArea',
18
19
  packageName: packageName,
@@ -25,10 +26,11 @@ var verticalPadding = 6;
25
26
  var transitionDuration = '0.2s';
26
27
  var borderWidth = 2;
27
28
  var baseStyles = null;
29
+ var baseStylesT26Shape = null;
28
30
  var appearanceStyles = {
29
- standard: "_1dqonqa1 _kp82rsbi _1ltx1j9a _1bqsbk0g _z1pvby5v _19wtrsbi _12yml4ek _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _17km1v6z _wg601v6z _858u1v1w _jomrr01l _7ehivyy1 _186j1v1w _qu18by5v",
30
- subtle: "_1dqonqa1 _kp821j28 _1ltx1j28 _19wtrsbi _12yml4ek _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _wg601v6z _17km1v6z _858u1v1w _jomrr01l _7ehivyy1",
31
- none: "_1dqoglyw _kp821j28 _1ltx1j28 _19wt1j28 _12ym1j28 _19qkv77o _zedr12x7 _1dbiv77o _1etu12x7 _1itd12x7 _wg6012x7 _1a4912x7 _17km12x7 _858u1j28 _jomr1j28 _7ehi3sij"
31
+ standard: "_1dqonqa1 _kp82rsbi _1ltx1j9a _1bqsbk0g _z1pvby5v _19wtrsbi _12yml4ek _1l02v77o _11zpv77o _141f1v6z _daj71v6z _olc612x7 _14ji12x7 _7ba01v6z _1kod1v6z _858u1v1w _jomrr01l _7ehivyy1 _186j1v1w _qu18by5v",
32
+ subtle: "_1dqonqa1 _kp821j28 _1ltx1j28 _19wtrsbi _12yml4ek _1l02v77o _11zpv77o _141f1v6z _daj71v6z _olc612x7 _14ji12x7 _1kod1v6z _7ba01v6z _858u1v1w _jomrr01l _7ehivyy1",
33
+ none: "_1dqoglyw _kp821j28 _1ltx1j28 _19wt1j28 _12ym1j28 _1l02v77o _daj712x7 _11zpv77o _141f12x7 _olc612x7 _1kod12x7 _14ji12x7 _7ba012x7 _858u1j28 _jomr1j28 _7ehi3sij"
32
34
  };
33
35
 
34
36
  // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
@@ -139,7 +141,7 @@ var InnerTextArea = /*#__PURE__*/forwardRef(function (props, ref) {
139
141
  onFocus: onFocusWithAnalytics,
140
142
  rows: minimumRows
141
143
  }, rest, {
142
- className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c82smr _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazovqm _slp31hna _153gksl0 _usy41kd8 _1a2sh9qi _vbqbhxcb _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fraksl0 _ibjd12ci _6zpvh9qi _19k01ouc _1idrpsu8 _1lephxcb _nmhq1fiz _1n388sxn _1luh3zdg _ndzbkwt5 _1vj0119y", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
144
+ className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c82smr _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazovqm _slp31hna _153gksl0 _usy41kd8 _1a2sh9qi _vbqbhxcb _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fraksl0 _ibjd12ci _6zpvh9qi _19k01ouc _1idrpsu8 _1lephxcb _nmhq1fiz _1n388sxn _1luh3zdg _ndzbkwt5 _1vj0119y", fg('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
143
145
  style: _objectSpread(_objectSpread({}, style), {}, {
144
146
  maxHeight: maxHeight,
145
147
  "--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textarea",
3
- "version": "8.1.0",
3
+ "version": "8.2.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/"
@@ -35,9 +35,9 @@
35
35
  "dependencies": {
36
36
  "@atlaskit/analytics-next": "^11.1.0",
37
37
  "@atlaskit/platform-feature-flags": "^1.1.0",
38
- "@atlaskit/primitives": "^16.1.0",
38
+ "@atlaskit/primitives": "^17.0.0",
39
39
  "@atlaskit/theme": "^21.0.0",
40
- "@atlaskit/tokens": "^8.0.0",
40
+ "@atlaskit/tokens": "^9.0.0",
41
41
  "@babel/runtime": "^7.0.0",
42
42
  "@compiled/react": "^0.18.6"
43
43
  },
@@ -48,14 +48,13 @@
48
48
  "@af/accessibility-testing": "workspace:^",
49
49
  "@af/integration-testing": "workspace:^",
50
50
  "@af/visual-regression": "workspace:^",
51
- "@atlaskit/button": "^23.6.0",
52
- "@atlaskit/css": "^0.15.0",
51
+ "@atlaskit/button": "^23.9.0",
52
+ "@atlaskit/css": "^0.19.0",
53
53
  "@atlaskit/docs": "^11.2.0",
54
- "@atlaskit/ds-lib": "^5.2.0",
55
- "@atlaskit/form": "^14.2.0",
54
+ "@atlaskit/ds-lib": "^5.3.0",
55
+ "@atlaskit/form": "^15.1.0",
56
56
  "@atlaskit/link": "^3.2.0",
57
- "@atlaskit/section-message": "^8.9.0",
58
- "@atlaskit/ssr": "workspace:^",
57
+ "@atlaskit/section-message": "^8.11.0",
59
58
  "@atlassian/ssr-tests": "workspace:^",
60
59
  "@testing-library/react": "^13.4.0",
61
60
  "@testing-library/user-event": "^14.4.3",
@@ -86,5 +85,10 @@
86
85
  ],
87
86
  "deprecation": "no-deprecated-imports"
88
87
  }
88
+ },
89
+ "platform-feature-flags": {
90
+ "platform-dst-shape-theme-default": {
91
+ "type": "boolean"
92
+ }
89
93
  }
90
94
  }