@atlaskit/textarea 8.0.14 → 8.1.0

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 +8 -0
  2. package/dist/cjs/text-area.compiled.css +9 -10
  3. package/dist/cjs/text-area.js +12 -8
  4. package/dist/es2019/text-area.compiled.css +9 -10
  5. package/dist/es2019/text-area.js +12 -8
  6. package/dist/esm/text-area.compiled.css +9 -10
  7. package/dist/esm/text-area.js +12 -8
  8. package/package.json +1 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/textarea
2
2
 
3
+ ## 8.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`2568622464f45`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2568622464f45) -
8
+ release previously feature-gated change to textfield, textarea, and select to increase font size
9
+ to 16px on mobile
10
+
3
11
  ## 8.0.14
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/text-area.compiled.css CHANGED
@@ -4,18 +4,18 @@
4
4
  ._v5641gs0{transition:var(--_19uzta9)}
5
5
  ._153gksl0[data-invalid]:not(:focus){border-color:var(--_1u9fbts)}
6
6
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
7
- ._19wt1elr:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8590a2)}
8
7
  ._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
9
- ._1bqs13gt:disabled:not(:focus){border-color:var(--ds-border-disabled,#091e420f)}
8
+ ._19wtrsbi:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8c8f97)}
9
+ ._1bqsbk0g:disabled:not(:focus){border-color:var(--ds-border-disabled,#0515240f)}
10
10
  ._1dqoglyw{border-style:none}
11
11
  ._1dqonqa1{border-style:solid}
12
12
  ._1fraksl0:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--_1u9fbts)}
13
- ._kp821elr:not(:focus){border-color:var(--ds-border-input,#8590a2)}
14
13
  ._kp821j28:not(:focus){border-color:transparent}
14
+ ._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
15
15
  ._12ji1r31{outline-color:currentColor}
16
16
  ._12y31o36{outline-width:medium}
17
- ._12ym1d5g:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f7f8f9)}
18
17
  ._12ym1j28:hover:not(:read-only):not(:focus){background-color:transparent}
18
+ ._12yml4ek:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f8f8f8)}
19
19
  ._13xeglyw:invalid{box-shadow:none}
20
20
  ._14zg1e08{resize:horizontal}
21
21
  ._14zg1e54{resize:vertical}
@@ -53,7 +53,6 @@
53
53
  ._2hwxidpf{margin-right:0}
54
54
  ._6zpvh9qi:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:var(--_1l1juom)}
55
55
  ._cfjqkb7n:disabled{-webkit-opacity:1}
56
- ._ect41gqc{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
57
56
  ._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
58
57
  ._i0dl1osq{flex-basis:100%}
59
58
  ._ibjd12ci:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--_1z08gfx)}
@@ -71,18 +70,18 @@
71
70
  ._vchhusvi{box-sizing:border-box}
72
71
  ._wg6012x7:not([data-compact]){padding-right:var(--ds-space-075,6px)}
73
72
  ._wg601v6z:not([data-compact]){padding-right:7px}
74
- ._z1pvsyzs:disabled:not(:focus){background-color:var(--ds-background-disabled,#091e4208)}
73
+ ._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
75
74
  ._zedr12x7[data-compact]{padding-right:var(--ds-space-075,6px)}
76
75
  ._zedr1v6z[data-compact]{padding-right:7px}
77
- ._186j1p6i:disabled:focus{border-color:var(--ds-border-focused,#388bff)}
76
+ ._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
78
77
  ._1luh3zdg[data-invalid]:focus{border-color:var(--_xjqa3d)}
79
78
  ._858u1j28:focus{border-color:transparent}
80
- ._858u1p6i:focus{border-color:var(--ds-border-focused,#388bff)}
79
+ ._858u1v1w:focus{border-color:var(--ds-border-focused,#4688ec)}
81
80
  ._1vj0119y[data-invalid]:focus{box-shadow:var(--_1n75f5r)}
82
81
  ._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
83
- ._7ehiq049:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
82
+ ._7ehivyy1:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
84
83
  ._jomr1j28:focus{background-color:transparent}
85
84
  ._jomrr01l:focus{background-color:var(--ds-background-input-pressed,#fff)}
86
85
  ._ndzbkwt5[data-invalid]:focus{background-color:var(--_t0vtv2)}
87
- ._qu18syzs:disabled:focus{background-color:var(--ds-background-disabled,#091e4208)}
86
+ ._qu18by5v:disabled:focus{background-color:var(--ds-background-disabled,#17171708)}
88
87
  @media (min-width:30rem){._1tn22smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._14mdudxr{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)!important}}
package/dist/cjs/text-area.js CHANGED
@@ -15,14 +15,13 @@ 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");
19
18
  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 = "8.0.13";
24
+ var packageVersion = "8.0.14";
26
25
  var analyticsParams = {
27
26
  componentName: 'textArea',
28
27
  packageName: packageName,
@@ -36,14 +35,19 @@ var transitionDuration = '0.2s';
36
35
  var borderWidth = 2;
37
36
  var baseStyles = null;
38
37
  var appearanceStyles = {
39
- standard: "_1dqonqa1 _kp821elr _1ltx1j9a _1bqs13gt _z1pvsyzs _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _17km1v6z _wg601v6z _858u1p6i _jomrr01l _7ehiq049 _186j1p6i _qu18syzs",
40
- subtle: "_1dqonqa1 _kp821j28 _1ltx1j28 _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _wg601v6z _17km1v6z _858u1p6i _jomrr01l _7ehiq049",
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",
41
40
  none: "_1dqoglyw _kp821j28 _1ltx1j28 _19wt1j28 _12ym1j28 _19qkv77o _zedr12x7 _1dbiv77o _1etu12x7 _1itd12x7 _wg6012x7 _1a4912x7 _17km12x7 _858u1j28 _jomr1j28 _7ehi3sij"
42
41
  };
42
+
43
+ // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
44
+ // To prevent this zoom behaviour on mobile devices, the textarea uses font.body.large (16px) by default,
45
+ // then switches to the smaller font.body on screens wider than 30rem (desktop).
46
+ // @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
47
+
43
48
  var fontStyles = {
44
- default: "_ect41gqc",
45
- monospace: "_ect41odn _1tn22smr _14mdudxr",
46
- large: "_11c81ixg _1tn22smr"
49
+ default: "_11c81ixg _1tn22smr",
50
+ monospace: "_11c81ixg _ect41odn _1tn22smr _14mdudxr"
47
51
  };
48
52
  var resizeStyles = {
49
53
  horizontal: "_14zg1e08",
@@ -144,7 +148,7 @@ var InnerTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
144
148
  onFocus: onFocusWithAnalytics,
145
149
  rows: minimumRows
146
150
  }, rest, {
147
- 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], (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && fontStyles['large'], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
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"]),
148
152
  style: _objectSpread(_objectSpread({}, style), {}, {
149
153
  maxHeight: maxHeight,
150
154
  "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
package/dist/es2019/text-area.compiled.css CHANGED
@@ -4,18 +4,18 @@
4
4
  ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
5
5
  ._153g78r2[data-invalid]:not(:focus){border-color:var(--ds-border-danger,#de350b)}
6
6
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
7
- ._19wt1elr:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8590a2)}
8
7
  ._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
9
- ._1bqs13gt:disabled:not(:focus){border-color:var(--ds-border-disabled,#091e420f)}
8
+ ._19wtrsbi:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8c8f97)}
9
+ ._1bqsbk0g:disabled:not(:focus){border-color:var(--ds-border-disabled,#0515240f)}
10
10
  ._1dqoglyw{border-style:none}
11
11
  ._1dqonqa1{border-style:solid}
12
12
  ._1fra78r2:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--ds-border-danger,#de350b)}
13
- ._kp821elr:not(:focus){border-color:var(--ds-border-input,#8590a2)}
14
13
  ._kp821j28:not(:focus){border-color:transparent}
14
+ ._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
15
15
  ._12ji1r31{outline-color:currentColor}
16
16
  ._12y31o36{outline-width:medium}
17
- ._12ym1d5g:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f7f8f9)}
18
17
  ._12ym1j28:hover:not(:read-only):not(:focus){background-color:transparent}
18
+ ._12yml4ek:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f8f8f8)}
19
19
  ._13xeglyw:invalid{box-shadow:none}
20
20
  ._14zg1e08{resize:horizontal}
21
21
  ._14zg1e54{resize:vertical}
@@ -53,7 +53,6 @@
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
55
  ._cfjqkb7n:disabled{-webkit-opacity:1}
56
- ._ect41gqc{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
57
56
  ._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
58
57
  ._i0dl1osq{flex-basis:100%}
59
58
  ._ibjd10ko:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--ds-background-input-hovered,#ebecf0)}
@@ -71,18 +70,18 @@
71
70
  ._vchhusvi{box-sizing:border-box}
72
71
  ._wg6012x7:not([data-compact]){padding-right:var(--ds-space-075,6px)}
73
72
  ._wg601v6z:not([data-compact]){padding-right:7px}
74
- ._z1pvsyzs:disabled:not(:focus){background-color:var(--ds-background-disabled,#091e4208)}
73
+ ._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
75
74
  ._zedr12x7[data-compact]{padding-right:var(--ds-space-075,6px)}
76
75
  ._zedr1v6z[data-compact]{padding-right:7px}
77
- ._186j1p6i:disabled:focus{border-color:var(--ds-border-focused,#388bff)}
76
+ ._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
78
77
  ._1luh194a[data-invalid]:focus{border-color:var(--ds-border-focused,#2684ff)}
79
78
  ._858u1j28:focus{border-color:transparent}
80
- ._858u1p6i:focus{border-color:var(--ds-border-focused,#388bff)}
79
+ ._858u1v1w:focus{border-color:var(--ds-border-focused,#4688ec)}
81
80
  ._1vj01cu8[data-invalid]:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#2684ff)}
82
81
  ._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
83
- ._7ehiq049:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
82
+ ._7ehivyy1:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
84
83
  ._jomr1j28:focus{background-color:transparent}
85
84
  ._jomrr01l:focus{background-color:var(--ds-background-input-pressed,#fff)}
86
85
  ._ndzbr01l[data-invalid]:focus{background-color:var(--ds-background-input-pressed,#fff)}
87
- ._qu18syzs:disabled:focus{background-color:var(--ds-background-disabled,#091e4208)}
86
+ ._qu18by5v:disabled:focus{background-color:var(--ds-background-disabled,#17171708)}
88
87
  @media (min-width:30rem){._1tn22smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._14mdudxr{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)!important}}
package/dist/es2019/text-area.js CHANGED
@@ -4,10 +4,9 @@ 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';
8
7
  import { B200, N0, N10, N20, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
9
8
  const packageName = "@atlaskit/textarea";
10
- const packageVersion = "8.0.13";
9
+ const packageVersion = "8.0.14";
11
10
  const analyticsParams = {
12
11
  componentName: 'textArea',
13
12
  packageName,
@@ -21,14 +20,19 @@ const transitionDuration = '0.2s';
21
20
  const borderWidth = 2;
22
21
  const baseStyles = null;
23
22
  const appearanceStyles = {
24
- standard: "_1dqonqa1 _kp821elr _1ltx1j9a _1bqs13gt _z1pvsyzs _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _17km1v6z _wg601v6z _858u1p6i _jomrr01l _7ehiq049 _186j1p6i _qu18syzs",
25
- subtle: "_1dqonqa1 _kp821j28 _1ltx1j28 _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _wg601v6z _17km1v6z _858u1p6i _jomrr01l _7ehiq049",
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",
26
25
  none: "_1dqoglyw _kp821j28 _1ltx1j28 _19wt1j28 _12ym1j28 _19qkv77o _zedr12x7 _1dbiv77o _1etu12x7 _1itd12x7 _wg6012x7 _1a4912x7 _17km12x7 _858u1j28 _jomr1j28 _7ehi3sij"
27
26
  };
27
+
28
+ // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
29
+ // To prevent this zoom behaviour on mobile devices, the textarea uses font.body.large (16px) by default,
30
+ // then switches to the smaller font.body on screens wider than 30rem (desktop).
31
+ // @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
32
+
28
33
  const fontStyles = {
29
- default: "_ect41gqc",
30
- monospace: "_ect41odn _1tn22smr _14mdudxr",
31
- large: "_11c81ixg _1tn22smr"
34
+ default: "_11c81ixg _1tn22smr",
35
+ monospace: "_11c81ixg _ect41odn _1tn22smr _14mdudxr"
32
36
  };
33
37
  const resizeStyles = {
34
38
  horizontal: "_14zg1e08",
@@ -121,7 +125,7 @@ const InnerTextArea = /*#__PURE__*/forwardRef((props, ref) => {
121
125
  onFocus: onFocusWithAnalytics,
122
126
  rows: minimumRows
123
127
  }, rest, {
124
- 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], fg('platform_design_system_team_safari_input_fix') && fontStyles['large'], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71i7i _16lwuel1"]),
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"]),
125
129
  style: {
126
130
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
127
131
  ...style,
package/dist/esm/text-area.compiled.css CHANGED
@@ -4,18 +4,18 @@
4
4
  ._v5641gs0{transition:var(--_19uzta9)}
5
5
  ._153gksl0[data-invalid]:not(:focus){border-color:var(--_1u9fbts)}
6
6
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
7
- ._19wt1elr:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8590a2)}
8
7
  ._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
9
- ._1bqs13gt:disabled:not(:focus){border-color:var(--ds-border-disabled,#091e420f)}
8
+ ._19wtrsbi:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8c8f97)}
9
+ ._1bqsbk0g:disabled:not(:focus){border-color:var(--ds-border-disabled,#0515240f)}
10
10
  ._1dqoglyw{border-style:none}
11
11
  ._1dqonqa1{border-style:solid}
12
12
  ._1fraksl0:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--_1u9fbts)}
13
- ._kp821elr:not(:focus){border-color:var(--ds-border-input,#8590a2)}
14
13
  ._kp821j28:not(:focus){border-color:transparent}
14
+ ._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
15
15
  ._12ji1r31{outline-color:currentColor}
16
16
  ._12y31o36{outline-width:medium}
17
- ._12ym1d5g:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f7f8f9)}
18
17
  ._12ym1j28:hover:not(:read-only):not(:focus){background-color:transparent}
18
+ ._12yml4ek:hover:not(:read-only):not(:focus){background-color:var(--ds-background-input-hovered,#f8f8f8)}
19
19
  ._13xeglyw:invalid{box-shadow:none}
20
20
  ._14zg1e08{resize:horizontal}
21
21
  ._14zg1e54{resize:vertical}
@@ -53,7 +53,6 @@
53
53
  ._2hwxidpf{margin-right:0}
54
54
  ._6zpvh9qi:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:var(--_1l1juom)}
55
55
  ._cfjqkb7n:disabled{-webkit-opacity:1}
56
- ._ect41gqc{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
57
56
  ._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
58
57
  ._i0dl1osq{flex-basis:100%}
59
58
  ._ibjd12ci:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--_1z08gfx)}
@@ -71,18 +70,18 @@
71
70
  ._vchhusvi{box-sizing:border-box}
72
71
  ._wg6012x7:not([data-compact]){padding-right:var(--ds-space-075,6px)}
73
72
  ._wg601v6z:not([data-compact]){padding-right:7px}
74
- ._z1pvsyzs:disabled:not(:focus){background-color:var(--ds-background-disabled,#091e4208)}
73
+ ._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
75
74
  ._zedr12x7[data-compact]{padding-right:var(--ds-space-075,6px)}
76
75
  ._zedr1v6z[data-compact]{padding-right:7px}
77
- ._186j1p6i:disabled:focus{border-color:var(--ds-border-focused,#388bff)}
76
+ ._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
78
77
  ._1luh3zdg[data-invalid]:focus{border-color:var(--_xjqa3d)}
79
78
  ._858u1j28:focus{border-color:transparent}
80
- ._858u1p6i:focus{border-color:var(--ds-border-focused,#388bff)}
79
+ ._858u1v1w:focus{border-color:var(--ds-border-focused,#4688ec)}
81
80
  ._1vj0119y[data-invalid]:focus{box-shadow:var(--_1n75f5r)}
82
81
  ._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
83
- ._7ehiq049:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
82
+ ._7ehivyy1:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
84
83
  ._jomr1j28:focus{background-color:transparent}
85
84
  ._jomrr01l:focus{background-color:var(--ds-background-input-pressed,#fff)}
86
85
  ._ndzbkwt5[data-invalid]:focus{background-color:var(--_t0vtv2)}
87
- ._qu18syzs:disabled:focus{background-color:var(--ds-background-disabled,#091e4208)}
86
+ ._qu18by5v:disabled:focus{background-color:var(--ds-background-disabled,#17171708)}
88
87
  @media (min-width:30rem){._1tn22smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._14mdudxr{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)!important}}
package/dist/esm/text-area.js CHANGED
@@ -10,10 +10,9 @@ 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';
14
13
  import { B200, N0, N10, N20, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
15
14
  var packageName = "@atlaskit/textarea";
16
- var packageVersion = "8.0.13";
15
+ var packageVersion = "8.0.14";
17
16
  var analyticsParams = {
18
17
  componentName: 'textArea',
19
18
  packageName: packageName,
@@ -27,14 +26,19 @@ var transitionDuration = '0.2s';
27
26
  var borderWidth = 2;
28
27
  var baseStyles = null;
29
28
  var appearanceStyles = {
30
- standard: "_1dqonqa1 _kp821elr _1ltx1j9a _1bqs13gt _z1pvsyzs _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _17km1v6z _wg601v6z _858u1p6i _jomrr01l _7ehiq049 _186j1p6i _qu18syzs",
31
- subtle: "_1dqonqa1 _kp821j28 _1ltx1j28 _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _wg601v6z _17km1v6z _858u1p6i _jomrr01l _7ehiq049",
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",
32
31
  none: "_1dqoglyw _kp821j28 _1ltx1j28 _19wt1j28 _12ym1j28 _19qkv77o _zedr12x7 _1dbiv77o _1etu12x7 _1itd12x7 _wg6012x7 _1a4912x7 _17km12x7 _858u1j28 _jomr1j28 _7ehi3sij"
33
32
  };
33
+
34
+ // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
35
+ // To prevent this zoom behaviour on mobile devices, the textarea uses font.body.large (16px) by default,
36
+ // then switches to the smaller font.body on screens wider than 30rem (desktop).
37
+ // @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
38
+
34
39
  var fontStyles = {
35
- default: "_ect41gqc",
36
- monospace: "_ect41odn _1tn22smr _14mdudxr",
37
- large: "_11c81ixg _1tn22smr"
40
+ default: "_11c81ixg _1tn22smr",
41
+ monospace: "_11c81ixg _ect41odn _1tn22smr _14mdudxr"
38
42
  };
39
43
  var resizeStyles = {
40
44
  horizontal: "_14zg1e08",
@@ -135,7 +139,7 @@ var InnerTextArea = /*#__PURE__*/forwardRef(function (props, ref) {
135
139
  onFocus: onFocusWithAnalytics,
136
140
  rows: minimumRows
137
141
  }, rest, {
138
- 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], fg('platform_design_system_team_safari_input_fix') && fontStyles['large'], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
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"]),
139
143
  style: _objectSpread(_objectSpread({}, style), {}, {
140
144
  maxHeight: maxHeight,
141
145
  "--_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.0.14",
3
+ "version": "8.1.0",
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/"
@@ -86,10 +86,5 @@
86
86
  ],
87
87
  "deprecation": "no-deprecated-imports"
88
88
  }
89
- },
90
- "platform-feature-flags": {
91
- "platform_design_system_team_safari_input_fix": {
92
- "type": "boolean"
93
- }
94
89
  }
95
90
  }