@atlaskit/textarea 8.2.3 → 8.2.5
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.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/text-area.compiled.css +16 -16
- package/dist/cjs/text-area.js +3 -15
- package/dist/es2019/text-area.compiled.css +15 -15
- package/dist/es2019/text-area.js +3 -4
- package/dist/esm/text-area.compiled.css +16 -16
- package/dist/esm/text-area.js +3 -15
- package/dist/types/text-area.d.ts +1 -1
- package/dist/types-ts4.5/text-area.d.ts +1 -1
- package/package.json +11 -10
- package/textarea.docs.tsx +49 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/textarea
|
|
2
2
|
|
|
3
|
+
## 8.2.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
|
|
8
|
+
Removes redundant fallback color values via @atlaskit/theme
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 8.2.4
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 8.2.3
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
4
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
5
5
|
._v5641gs0{transition:var(--_19uzta9)}
|
|
6
|
-
.
|
|
6
|
+
._153g1bqt[data-invalid]:not(:focus){border-color:var(--ds-border-danger,#e2483d)}
|
|
7
7
|
._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
8
8
|
._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
|
|
9
9
|
._19wtrsbi:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8c8f97)}
|
|
10
10
|
._1bqsbk0g:disabled:not(:focus){border-color:var(--ds-border-disabled,#0515240f)}
|
|
11
11
|
._1dqoglyw{border-style:none}
|
|
12
12
|
._1dqonqa1{border-style:solid}
|
|
13
|
-
.
|
|
13
|
+
._1fra1bqt:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--ds-border-danger,#e2483d)}
|
|
14
14
|
._kp821j28:not(:focus){border-color:transparent}
|
|
15
15
|
._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
|
|
16
16
|
._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
|
|
@@ -30,19 +30,19 @@
|
|
|
30
30
|
._16lw1cn1:not([data-compact]){min-height:var(--_n9nqvh)}
|
|
31
31
|
._18m91wug{overflow-y:auto}
|
|
32
32
|
._18u0idpf{margin-left:0}
|
|
33
|
-
.
|
|
33
|
+
._19k0by5v:hover:not(:read-only):not(:focus):disabled{background-color:var(--ds-background-disabled,#17171708)}
|
|
34
34
|
._19pkidpf{margin-top:0}
|
|
35
|
-
.
|
|
35
|
+
._1a2sizbr[data-invalid]:not(:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
36
36
|
._1bsb1osq{width:100%}
|
|
37
37
|
._1e0c1ule{display:block}
|
|
38
38
|
._1goxglyw::-ms-clear{display:none}
|
|
39
|
-
.
|
|
40
|
-
.
|
|
39
|
+
._1idr1rpy::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b6e76)}
|
|
40
|
+
._1idr1rpy::placeholder{color:var(--ds-text-subtlest,#6b6e76)}
|
|
41
41
|
._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
|
|
42
42
|
._1kod1v6z:not([data-compact]){padding-inline-end:7px}
|
|
43
43
|
._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
|
|
44
|
-
.
|
|
45
|
-
.
|
|
44
|
+
._1lep1gmx:disabled::-ms-input-placeholder{color:var(--ds-text-disabled,#080f214a)}
|
|
45
|
+
._1lep1gmx:disabled::placeholder{color:var(--ds-text-disabled,#080f214a)}
|
|
46
46
|
._1ltx1j28:not(:focus){background-color:transparent}
|
|
47
47
|
._1ltx1j9a:not(:focus){background-color:var(--ds-background-input,#fff)}
|
|
48
48
|
._1n388sxn:not([data-compact]){line-height:1.4285714285714286}
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
._1reo1wug{overflow-x:auto}
|
|
52
52
|
._1ul9idpf{min-width:0}
|
|
53
53
|
._2hwxidpf{margin-right:0}
|
|
54
|
-
.
|
|
54
|
+
._6zpvizbr:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
55
55
|
._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
|
|
56
56
|
._7ba01v6z:not([data-compact]){padding-inline-start:7px}
|
|
57
57
|
._cfjqkb7n:disabled{-webkit-opacity:1}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
._daj71v6z[data-compact]{padding-inline-end:7px}
|
|
60
60
|
._ect4zzfg{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
|
|
61
61
|
._i0dl1osq{flex-basis:100%}
|
|
62
|
-
.
|
|
62
|
+
._ibjdl4ek:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--ds-background-input-hovered,#f8f8f8)}
|
|
63
63
|
._j5dh13gf:disabled{cursor:not-allowed}
|
|
64
64
|
._k3o7n7od:disabled{-webkit-text-fill-color:unset}
|
|
65
65
|
._kqswh2mm{position:relative}
|
|
@@ -68,21 +68,21 @@
|
|
|
68
68
|
._otyridpf{margin-bottom:0}
|
|
69
69
|
._p12f1osq{max-width:100%}
|
|
70
70
|
._slp31hna{word-wrap:break-word}
|
|
71
|
-
.
|
|
72
|
-
.
|
|
71
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
72
|
+
._usy41j9a[data-invalid]:not(:focus){background-color:var(--ds-background-input,#fff)}
|
|
73
73
|
._uzq71d1b[data-compact]{min-height:var(--_dqsusn)}
|
|
74
|
-
.
|
|
74
|
+
._vbqb1gmx:disabled{color:var(--ds-text-disabled,#080f214a)}
|
|
75
75
|
._vchhusvi{box-sizing:border-box}
|
|
76
76
|
._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
|
|
77
77
|
._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
|
|
78
|
-
.
|
|
78
|
+
._1luh1v1w[data-invalid]:focus{border-color:var(--ds-border-focused,#4688ec)}
|
|
79
79
|
._858u1j28:focus{border-color:transparent}
|
|
80
80
|
._858u1v1w:focus{border-color:var(--ds-border-focused,#4688ec)}
|
|
81
|
-
.
|
|
81
|
+
._1vj0vyy1[data-invalid]:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
|
|
82
82
|
._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
|
|
83
83
|
._7ehivyy1:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
|
|
84
84
|
._jomr1j28:focus{background-color:transparent}
|
|
85
85
|
._jomrr01l:focus{background-color:var(--ds-background-input-pressed,#fff)}
|
|
86
|
-
.
|
|
86
|
+
._ndzbr01l[data-invalid]:focus{background-color:var(--ds-background-input-pressed,#fff)}
|
|
87
87
|
._qu18by5v:disabled:focus{background-color:var(--ds-background-disabled,#17171708)}
|
|
88
88
|
@media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._14md1vhz{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)!important}}
|
package/dist/cjs/text-area.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* text-area.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* text-area.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -16,13 +16,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
16
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
17
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
18
18
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
20
19
|
var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value", "style"];
|
|
21
20
|
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); }
|
|
22
21
|
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; }
|
|
23
22
|
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; }
|
|
24
23
|
var packageName = "@atlaskit/textarea";
|
|
25
|
-
var packageVersion = "
|
|
24
|
+
var packageVersion = "8.2.5";
|
|
26
25
|
var analyticsParams = {
|
|
27
26
|
componentName: 'textArea',
|
|
28
27
|
packageName: packageName,
|
|
@@ -150,21 +149,10 @@ var InnerTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
150
149
|
onFocus: onFocusWithAnalytics,
|
|
151
150
|
rows: minimumRows
|
|
152
151
|
}, rest, {
|
|
153
|
-
className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm
|
|
152
|
+
className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazi7uo _slp31hna _153g1bqt _usy41j9a _1a2sizbr _vbqb1gmx _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra1bqt _ibjdl4ek _6zpvizbr _19k0by5v _1idr1rpy _1lep1gmx _nmhq1fiz _1n388sxn _1luh1v1w _ndzbr01l _1vj0vyy1", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
|
|
154
153
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
155
154
|
maxHeight: maxHeight,
|
|
156
|
-
"--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
|
|
157
155
|
"--_19uzta9": (0, _runtime.ix)("background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out")),
|
|
158
|
-
"--_dnrmjm": (0, _runtime.ix)("var(--ds-text-disabled, ".concat(_colors.N70, ")")),
|
|
159
|
-
"--_t0vtv2": (0, _runtime.ix)("var(--ds-background-input-pressed, ".concat(_colors.N0, ")")),
|
|
160
|
-
"--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")")),
|
|
161
|
-
"--_1n75f5r": (0, _runtime.ix)("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))),
|
|
162
|
-
"--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
|
|
163
|
-
"--_1u9fbts": (0, _runtime.ix)("var(--ds-border-danger, ".concat(_colors.R400, ")")),
|
|
164
|
-
"--_1l1juom": (0, _runtime.ix)("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")"))),
|
|
165
|
-
"--_r5pknd": (0, _runtime.ix)("var(--ds-background-disabled, ".concat(_colors.N20, ")")),
|
|
166
|
-
"--_1z08gfx": (0, _runtime.ix)("var(--ds-background-input-hovered, ".concat(_colors.N30, ")")),
|
|
167
|
-
"--_vrm7dk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
|
|
168
156
|
"--_dqsusn": (0, _runtime.ix)("".concat(lineHeightCompact * minimumRows + compactVerticalPadding * 2 + borderHeight * 2, "px")),
|
|
169
157
|
"--_n9nqvh": (0, _runtime.ix)("".concat(lineHeightBase * minimumRows + verticalPadding * 2 + borderHeight * 2, "px"))
|
|
170
158
|
})
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
4
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
5
5
|
._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
|
|
6
|
-
.
|
|
6
|
+
._153g1bqt[data-invalid]:not(:focus){border-color:var(--ds-border-danger,#e2483d)}
|
|
7
7
|
._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
8
8
|
._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
|
|
9
9
|
._19wtrsbi:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8c8f97)}
|
|
10
10
|
._1bqsbk0g:disabled:not(:focus){border-color:var(--ds-border-disabled,#0515240f)}
|
|
11
11
|
._1dqoglyw{border-style:none}
|
|
12
12
|
._1dqonqa1{border-style:solid}
|
|
13
|
-
.
|
|
13
|
+
._1fra1bqt:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--ds-border-danger,#e2483d)}
|
|
14
14
|
._kp821j28:not(:focus){border-color:transparent}
|
|
15
15
|
._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
|
|
16
16
|
._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
|
|
@@ -30,19 +30,19 @@
|
|
|
30
30
|
._16lwuel1:not([data-compact]){min-height:var(--_eorxnz)}
|
|
31
31
|
._18m91wug{overflow-y:auto}
|
|
32
32
|
._18u0idpf{margin-left:0}
|
|
33
|
-
.
|
|
33
|
+
._19k0by5v:hover:not(:read-only):not(:focus):disabled{background-color:var(--ds-background-disabled,#17171708)}
|
|
34
34
|
._19pkidpf{margin-top:0}
|
|
35
|
-
.
|
|
35
|
+
._1a2sizbr[data-invalid]:not(:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
36
36
|
._1bsb1osq{width:100%}
|
|
37
37
|
._1e0c1ule{display:block}
|
|
38
38
|
._1goxglyw::-ms-clear{display:none}
|
|
39
|
-
.
|
|
40
|
-
.
|
|
39
|
+
._1idr1rpy::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b6e76)}
|
|
40
|
+
._1idr1rpy::placeholder{color:var(--ds-text-subtlest,#6b6e76)}
|
|
41
41
|
._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
|
|
42
42
|
._1kod1v6z:not([data-compact]){padding-inline-end:7px}
|
|
43
43
|
._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
|
|
44
|
-
.
|
|
45
|
-
.
|
|
44
|
+
._1lep1gmx:disabled::-ms-input-placeholder{color:var(--ds-text-disabled,#080f214a)}
|
|
45
|
+
._1lep1gmx:disabled::placeholder{color:var(--ds-text-disabled,#080f214a)}
|
|
46
46
|
._1ltx1j28:not(:focus){background-color:transparent}
|
|
47
47
|
._1ltx1j9a:not(:focus){background-color:var(--ds-background-input,#fff)}
|
|
48
48
|
._1n388sxn:not([data-compact]){line-height:1.4285714285714286}
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
._1reo1wug{overflow-x:auto}
|
|
52
52
|
._1ul9idpf{min-width:0}
|
|
53
53
|
._2hwxidpf{margin-right:0}
|
|
54
|
-
.
|
|
54
|
+
._6zpvizbr:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
55
55
|
._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
|
|
56
56
|
._7ba01v6z:not([data-compact]){padding-inline-start:7px}
|
|
57
57
|
._cfjqkb7n:disabled{-webkit-opacity:1}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
._daj71v6z[data-compact]{padding-inline-end:7px}
|
|
60
60
|
._ect4zzfg{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
|
|
61
61
|
._i0dl1osq{flex-basis:100%}
|
|
62
|
-
.
|
|
62
|
+
._ibjdl4ek:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--ds-background-input-hovered,#f8f8f8)}
|
|
63
63
|
._j5dh13gf:disabled{cursor:not-allowed}
|
|
64
64
|
._k3o7n7od:disabled{-webkit-text-fill-color:unset}
|
|
65
65
|
._kqswh2mm{position:relative}
|
|
@@ -68,17 +68,17 @@
|
|
|
68
68
|
._otyridpf{margin-bottom:0}
|
|
69
69
|
._p12f1osq{max-width:100%}
|
|
70
70
|
._slp31hna{word-wrap:break-word}
|
|
71
|
-
.
|
|
72
|
-
.
|
|
71
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
72
|
+
._usy41j9a[data-invalid]:not(:focus){background-color:var(--ds-background-input,#fff)}
|
|
73
73
|
._uzq71i7i[data-compact]{min-height:var(--_6ny3x7)}
|
|
74
|
-
.
|
|
74
|
+
._vbqb1gmx:disabled{color:var(--ds-text-disabled,#080f214a)}
|
|
75
75
|
._vchhusvi{box-sizing:border-box}
|
|
76
76
|
._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
|
|
77
77
|
._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
|
|
78
|
-
.
|
|
78
|
+
._1luh1v1w[data-invalid]:focus{border-color:var(--ds-border-focused,#4688ec)}
|
|
79
79
|
._858u1j28:focus{border-color:transparent}
|
|
80
80
|
._858u1v1w:focus{border-color:var(--ds-border-focused,#4688ec)}
|
|
81
|
-
.
|
|
81
|
+
._1vj0vyy1[data-invalid]:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
|
|
82
82
|
._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
|
|
83
83
|
._7ehivyy1:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
|
|
84
84
|
._jomr1j28:focus{background-color:transparent}
|
package/dist/es2019/text-area.js
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
/* text-area.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* text-area.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
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
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
-
import { B200, N0, N10, N20, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
|
|
9
8
|
const packageName = "@atlaskit/textarea";
|
|
10
|
-
const packageVersion = "
|
|
9
|
+
const packageVersion = "8.2.5";
|
|
11
10
|
const analyticsParams = {
|
|
12
11
|
componentName: 'textArea',
|
|
13
12
|
packageName,
|
|
@@ -127,7 +126,7 @@ const InnerTextArea = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
127
126
|
onFocus: onFocusWithAnalytics,
|
|
128
127
|
rows: minimumRows
|
|
129
128
|
}, rest, {
|
|
130
|
-
className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v564r5cv _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm
|
|
129
|
+
className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v564r5cv _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazi7uo _slp31hna _153g1bqt _usy41j9a _1a2sizbr _vbqb1gmx _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra1bqt _ibjdl4ek _6zpvizbr _19k0by5v _1idr1rpy _1lep1gmx _nmhq1fiz _1n388sxn _1luh1v1w _ndzbr01l _1vj0vyy1", fg('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71i7i _16lwuel1"]),
|
|
131
130
|
style: {
|
|
132
131
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
133
132
|
...style,
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
4
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
5
5
|
._v5641gs0{transition:var(--_19uzta9)}
|
|
6
|
-
.
|
|
6
|
+
._153g1bqt[data-invalid]:not(:focus){border-color:var(--ds-border-danger,#e2483d)}
|
|
7
7
|
._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
8
8
|
._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
|
|
9
9
|
._19wtrsbi:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8c8f97)}
|
|
10
10
|
._1bqsbk0g:disabled:not(:focus){border-color:var(--ds-border-disabled,#0515240f)}
|
|
11
11
|
._1dqoglyw{border-style:none}
|
|
12
12
|
._1dqonqa1{border-style:solid}
|
|
13
|
-
.
|
|
13
|
+
._1fra1bqt:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--ds-border-danger,#e2483d)}
|
|
14
14
|
._kp821j28:not(:focus){border-color:transparent}
|
|
15
15
|
._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
|
|
16
16
|
._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
|
|
@@ -30,19 +30,19 @@
|
|
|
30
30
|
._16lw1cn1:not([data-compact]){min-height:var(--_n9nqvh)}
|
|
31
31
|
._18m91wug{overflow-y:auto}
|
|
32
32
|
._18u0idpf{margin-left:0}
|
|
33
|
-
.
|
|
33
|
+
._19k0by5v:hover:not(:read-only):not(:focus):disabled{background-color:var(--ds-background-disabled,#17171708)}
|
|
34
34
|
._19pkidpf{margin-top:0}
|
|
35
|
-
.
|
|
35
|
+
._1a2sizbr[data-invalid]:not(:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
36
36
|
._1bsb1osq{width:100%}
|
|
37
37
|
._1e0c1ule{display:block}
|
|
38
38
|
._1goxglyw::-ms-clear{display:none}
|
|
39
|
-
.
|
|
40
|
-
.
|
|
39
|
+
._1idr1rpy::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b6e76)}
|
|
40
|
+
._1idr1rpy::placeholder{color:var(--ds-text-subtlest,#6b6e76)}
|
|
41
41
|
._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
|
|
42
42
|
._1kod1v6z:not([data-compact]){padding-inline-end:7px}
|
|
43
43
|
._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
|
|
44
|
-
.
|
|
45
|
-
.
|
|
44
|
+
._1lep1gmx:disabled::-ms-input-placeholder{color:var(--ds-text-disabled,#080f214a)}
|
|
45
|
+
._1lep1gmx:disabled::placeholder{color:var(--ds-text-disabled,#080f214a)}
|
|
46
46
|
._1ltx1j28:not(:focus){background-color:transparent}
|
|
47
47
|
._1ltx1j9a:not(:focus){background-color:var(--ds-background-input,#fff)}
|
|
48
48
|
._1n388sxn:not([data-compact]){line-height:1.4285714285714286}
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
._1reo1wug{overflow-x:auto}
|
|
52
52
|
._1ul9idpf{min-width:0}
|
|
53
53
|
._2hwxidpf{margin-right:0}
|
|
54
|
-
.
|
|
54
|
+
._6zpvizbr:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
55
55
|
._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
|
|
56
56
|
._7ba01v6z:not([data-compact]){padding-inline-start:7px}
|
|
57
57
|
._cfjqkb7n:disabled{-webkit-opacity:1}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
._daj71v6z[data-compact]{padding-inline-end:7px}
|
|
60
60
|
._ect4zzfg{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
|
|
61
61
|
._i0dl1osq{flex-basis:100%}
|
|
62
|
-
.
|
|
62
|
+
._ibjdl4ek:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--ds-background-input-hovered,#f8f8f8)}
|
|
63
63
|
._j5dh13gf:disabled{cursor:not-allowed}
|
|
64
64
|
._k3o7n7od:disabled{-webkit-text-fill-color:unset}
|
|
65
65
|
._kqswh2mm{position:relative}
|
|
@@ -68,21 +68,21 @@
|
|
|
68
68
|
._otyridpf{margin-bottom:0}
|
|
69
69
|
._p12f1osq{max-width:100%}
|
|
70
70
|
._slp31hna{word-wrap:break-word}
|
|
71
|
-
.
|
|
72
|
-
.
|
|
71
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
72
|
+
._usy41j9a[data-invalid]:not(:focus){background-color:var(--ds-background-input,#fff)}
|
|
73
73
|
._uzq71d1b[data-compact]{min-height:var(--_dqsusn)}
|
|
74
|
-
.
|
|
74
|
+
._vbqb1gmx:disabled{color:var(--ds-text-disabled,#080f214a)}
|
|
75
75
|
._vchhusvi{box-sizing:border-box}
|
|
76
76
|
._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
|
|
77
77
|
._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
|
|
78
|
-
.
|
|
78
|
+
._1luh1v1w[data-invalid]:focus{border-color:var(--ds-border-focused,#4688ec)}
|
|
79
79
|
._858u1j28:focus{border-color:transparent}
|
|
80
80
|
._858u1v1w:focus{border-color:var(--ds-border-focused,#4688ec)}
|
|
81
|
-
.
|
|
81
|
+
._1vj0vyy1[data-invalid]:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
|
|
82
82
|
._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
|
|
83
83
|
._7ehivyy1:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
|
|
84
84
|
._jomr1j28:focus{background-color:transparent}
|
|
85
85
|
._jomrr01l:focus{background-color:var(--ds-background-input-pressed,#fff)}
|
|
86
|
-
.
|
|
86
|
+
._ndzbr01l[data-invalid]:focus{background-color:var(--ds-background-input-pressed,#fff)}
|
|
87
87
|
._qu18by5v:disabled:focus{background-color:var(--ds-background-disabled,#17171708)}
|
|
88
88
|
@media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._14md1vhz{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)!important}}
|
package/dist/esm/text-area.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* text-area.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* text-area.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _typeof from "@babel/runtime/helpers/typeof";
|
|
4
4
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
@@ -11,9 +11,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
11
11
|
import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
|
|
12
12
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
13
13
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
|
-
import { B200, N0, N10, N20, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
|
|
15
14
|
var packageName = "@atlaskit/textarea";
|
|
16
|
-
var packageVersion = "
|
|
15
|
+
var packageVersion = "8.2.5";
|
|
17
16
|
var analyticsParams = {
|
|
18
17
|
componentName: 'textArea',
|
|
19
18
|
packageName: packageName,
|
|
@@ -141,21 +140,10 @@ var InnerTextArea = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
141
140
|
onFocus: onFocusWithAnalytics,
|
|
142
141
|
rows: minimumRows
|
|
143
142
|
}, rest, {
|
|
144
|
-
className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm
|
|
143
|
+
className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazi7uo _slp31hna _153g1bqt _usy41j9a _1a2sizbr _vbqb1gmx _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra1bqt _ibjdl4ek _6zpvizbr _19k0by5v _1idr1rpy _1lep1gmx _nmhq1fiz _1n388sxn _1luh1v1w _ndzbr01l _1vj0vyy1", fg('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
|
|
145
144
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
146
145
|
maxHeight: maxHeight,
|
|
147
|
-
"--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
|
|
148
146
|
"--_19uzta9": ix("background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out")),
|
|
149
|
-
"--_dnrmjm": ix("var(--ds-text-disabled, ".concat(N70, ")")),
|
|
150
|
-
"--_t0vtv2": ix("var(--ds-background-input-pressed, ".concat(N0, ")")),
|
|
151
|
-
"--_xjqa3d": ix("var(--ds-border-focused, ".concat(B200, ")")),
|
|
152
|
-
"--_1n75f5r": ix("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")"))),
|
|
153
|
-
"--_4mkb4g": ix("var(--ds-background-input, ".concat(N10, ")")),
|
|
154
|
-
"--_1u9fbts": ix("var(--ds-border-danger, ".concat(R400, ")")),
|
|
155
|
-
"--_1l1juom": ix("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")"))),
|
|
156
|
-
"--_r5pknd": ix("var(--ds-background-disabled, ".concat(N20, ")")),
|
|
157
|
-
"--_1z08gfx": ix("var(--ds-background-input-hovered, ".concat(N30, ")")),
|
|
158
|
-
"--_vrm7dk": ix("var(--ds-text-subtlest, ".concat(N200, ")")),
|
|
159
147
|
"--_dqsusn": ix("".concat(lineHeightCompact * minimumRows + compactVerticalPadding * 2 + borderHeight * 2, "px")),
|
|
160
148
|
"--_n9nqvh": ix("".concat(lineHeightBase * minimumRows + verticalPadding * 2 + borderHeight * 2, "px"))
|
|
161
149
|
})
|
|
@@ -13,5 +13,5 @@ import { type TextAreaProps } from './types';
|
|
|
13
13
|
* - [Code](https://atlassian.design/components/textarea/code)
|
|
14
14
|
* - [Usage](https://atlassian.design/components/textarea/usage)
|
|
15
15
|
*/
|
|
16
|
-
declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<TextAreaProps,
|
|
16
|
+
declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<TextAreaProps, 'ref'> & React.RefAttributes<HTMLTextAreaElement>>>;
|
|
17
17
|
export default TextArea;
|
|
@@ -13,5 +13,5 @@ import { type TextAreaProps } from './types';
|
|
|
13
13
|
* - [Code](https://atlassian.design/components/textarea/code)
|
|
14
14
|
* - [Usage](https://atlassian.design/components/textarea/usage)
|
|
15
15
|
*/
|
|
16
|
-
declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<TextAreaProps,
|
|
16
|
+
declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<TextAreaProps, 'ref'> & React.RefAttributes<HTMLTextAreaElement>>>;
|
|
17
17
|
export default TextArea;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/textarea",
|
|
3
|
-
"version": "8.2.
|
|
3
|
+
"version": "8.2.5",
|
|
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/"
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@atlaskit/analytics-next": "^11.
|
|
36
|
+
"@atlaskit/analytics-next": "^11.2.0",
|
|
37
37
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
38
|
-
"@atlaskit/primitives": "^18.
|
|
39
|
-
"@atlaskit/theme": "^
|
|
40
|
-
"@atlaskit/tokens": "^11.
|
|
38
|
+
"@atlaskit/primitives": "^18.1.0",
|
|
39
|
+
"@atlaskit/theme": "^22.0.0",
|
|
40
|
+
"@atlaskit/tokens": "^11.4.0",
|
|
41
41
|
"@babel/runtime": "^7.0.0",
|
|
42
|
-
"@compiled/react": "^0.
|
|
42
|
+
"@compiled/react": "^0.20.0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"react": "^18.2.0"
|
|
@@ -48,14 +48,15 @@
|
|
|
48
48
|
"@af/accessibility-testing": "workspace:^",
|
|
49
49
|
"@af/integration-testing": "workspace:^",
|
|
50
50
|
"@af/visual-regression": "workspace:^",
|
|
51
|
-
"@atlaskit/button": "^23.
|
|
51
|
+
"@atlaskit/button": "^23.10.0",
|
|
52
52
|
"@atlaskit/css": "^0.19.0",
|
|
53
|
-
"@atlaskit/docs": "^11.
|
|
54
|
-
"@atlaskit/ds-lib": "^
|
|
55
|
-
"@atlaskit/form": "^15.
|
|
53
|
+
"@atlaskit/docs": "^11.7.0",
|
|
54
|
+
"@atlaskit/ds-lib": "^6.0.0",
|
|
55
|
+
"@atlaskit/form": "^15.5.0",
|
|
56
56
|
"@atlaskit/link": "^3.3.0",
|
|
57
57
|
"@atlaskit/section-message": "^8.12.0",
|
|
58
58
|
"@atlassian/ssr-tests": "workspace:^",
|
|
59
|
+
"@atlassian/structured-docs-types": "workspace:^",
|
|
59
60
|
"@testing-library/react": "^16.3.0",
|
|
60
61
|
"@testing-library/user-event": "^14.4.3",
|
|
61
62
|
"jest-in-case": "^1.0.2",
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
|
|
3
|
+
import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
|
|
4
|
+
|
|
5
|
+
const documentation: ComponentStructuredContentSource[] = [
|
|
6
|
+
{
|
|
7
|
+
name: 'Textarea',
|
|
8
|
+
description: 'A textarea is a multiline text input control for longer text content.',
|
|
9
|
+
status: 'general-availability',
|
|
10
|
+
import: {
|
|
11
|
+
name: 'Textarea',
|
|
12
|
+
package: '@atlaskit/textarea',
|
|
13
|
+
type: 'default',
|
|
14
|
+
packagePath: path.resolve(__dirname),
|
|
15
|
+
packageJson: require('./package.json'),
|
|
16
|
+
},
|
|
17
|
+
usageGuidelines: [
|
|
18
|
+
'Use for long-form, multi-line text in forms',
|
|
19
|
+
'Expandable height; label and optional helper text',
|
|
20
|
+
'Do not use placeholder for critical info—use label or helper text',
|
|
21
|
+
'Use TextField for short, single-line input',
|
|
22
|
+
],
|
|
23
|
+
contentGuidelines: [
|
|
24
|
+
'Label as noun string (e.g. "Description" not "Modal title + Description")',
|
|
25
|
+
'Use helper text to clarify; do not put critical info in placeholder',
|
|
26
|
+
'Provide appropriate error messages',
|
|
27
|
+
'Consider content length and formatting',
|
|
28
|
+
],
|
|
29
|
+
accessibilityGuidelines: [
|
|
30
|
+
'Ensure label is associated with the textarea',
|
|
31
|
+
'Do not use placeholder for critical info—use label or helper (search exception only with icon + accessible label)',
|
|
32
|
+
'Provide clear labels for all textareas',
|
|
33
|
+
'Provide keyboard navigation support',
|
|
34
|
+
'Indicate required fields clearly',
|
|
35
|
+
'Use appropriate error states and messaging',
|
|
36
|
+
],
|
|
37
|
+
examples: [
|
|
38
|
+
{
|
|
39
|
+
name: 'Textarea',
|
|
40
|
+
description: 'Textarea example',
|
|
41
|
+
source: path.resolve(__dirname, './examples/ai/textarea.tsx'),
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
keywords: ['textarea', 'input', 'form', 'text', 'multiline', 'input', 'field'],
|
|
45
|
+
categories: ['forms-and-input'],
|
|
46
|
+
},
|
|
47
|
+
];
|
|
48
|
+
|
|
49
|
+
export default documentation;
|