@atlaskit/textfield 8.0.4 → 8.0.6

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 +15 -0
  2. package/dist/cjs/text-field.compiled.css +8 -8
  3. package/dist/cjs/text-field.js +10 -12
  4. package/dist/es2019/text-field.compiled.css +8 -8
  5. package/dist/es2019/text-field.js +9 -10
  6. package/dist/esm/text-field.compiled.css +8 -8
  7. package/dist/esm/text-field.js +9 -10
  8. package/package.json +13 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 8.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 8.0.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [#156306](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156306)
14
+ [`fce9f0b8cd381`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fce9f0b8cd381) -
15
+ [ux] Applies visible focus only when the text input is actively focused, instead of any focusable
16
+ elements rendered via elemBeforeInput or elemAfterInput.
17
+
3
18
  ## 8.0.4
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/text-field.compiled.css CHANGED
@@ -1,4 +1,3 @@
1
-
2
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)}
3
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
4
3
  ._19itidpf{border:0}
@@ -11,6 +10,8 @@
11
10
  ._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
12
11
  ._1h6d1j28{border-color:transparent}
13
12
  ._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
13
+ ._1p9x1j28._1p9x1j28:has(input:focus){border-color:transparent}
14
+ ._1p9x1p6i._1p9x1p6i:has(input:focus){border-color:var(--ds-border-focused,#388bff)}
14
15
  ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
15
16
  ._12ji1r31{outline-color:currentColor}
16
17
  ._12y31o36{outline-width:medium}
@@ -57,23 +58,22 @@
57
58
  ._lcxv1wug{pointer-events:auto}
58
59
  ._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
59
60
  ._olc6u2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}
61
+ ._q4333sij._q4333sij:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
62
+ ._q433q049._q433q049:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
63
+ ._qao91j28._qao91j28:has(input:focus){background-color:transparent}
64
+ ._qao9r01l._qao9r01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
60
65
  ._s7n4jp4b{vertical-align:top}
61
66
  ._slp31hna{word-wrap:break-word}
62
67
  ._syaz1fxt{color:var(--ds-text,#172b4d)}
63
68
  ._syaz1kw7{color:inherit}
64
69
  ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
70
+ ._uk1sr01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
65
71
  ._vchhusvi{box-sizing:border-box}
66
72
  ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
67
73
  ._y4tiidpf{padding-inline-end:0}
68
- ._ochr1j28._ochr1j28:focus-within{border-color:transparent}
69
- ._ochr1p6i._ochr1p6i:focus-within{border-color:var(--ds-border-focused,#388bff)}._10j7r01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
70
- ._195e1j28._195e1j28:focus-within{background-color:transparent}
71
- ._195er01l._195er01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
72
- ._bqht3sij._bqht3sij:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
73
- ._bqhtq049._bqhtq049:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
74
74
  ._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
75
75
  ._4cvx1j28:hover{border-color:transparent}
76
76
  ._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
77
77
  ._irr31j28:hover{background-color:transparent}
78
- @media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._srjtgir2:focus-within{border-color:Highlight}}
78
+ @media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._msj6gir2:has(input:focus){border-color:Highlight}}
79
79
  @media (min-width:30rem){._14md1odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}._1srd1b66[data-compact]{padding-block-end:var(--ds-space-050,4px)}._oi9h1b66[data-compact]{padding-block-start:var(--ds-space-050,4px)}._1e3012x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}._1txv12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}._1tn22smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._l9oiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}._549yu2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}._1h5w12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}._124212x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}}
package/dist/cjs/text-field.js CHANGED
@@ -17,19 +17,18 @@ var _react = _interopRequireWildcard(require("react"));
17
17
  var _analyticsNext = require("@atlaskit/analytics-next");
18
18
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
19
  var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
20
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
21
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 containerMedia = {
25
- invalid: "_srjtgir2",
24
+ invalid: "_msj6gir2",
26
25
  disabled: "_6up518qt"
27
26
  };
28
27
  var inputMediaDisabled = null;
29
28
  var analyticsParams = {
30
29
  componentName: 'textField',
31
30
  packageName: "@atlaskit/textfield",
32
- packageVersion: "8.0.4"
31
+ packageVersion: "8.0.6"
33
32
  };
34
33
  var disabledStyle = {
35
34
  standard: "_1h6dsyzs _bfhksyzs _syaz1lh4 _80om13gf",
@@ -38,9 +37,9 @@ var disabledStyle = {
38
37
  };
39
38
  var invalidStyle = null;
40
39
  var focusWithinStyle = {
41
- standard: "_ochr1p6i _195er01l _bqhtq049",
42
- subtle: "_ochr1p6i _195er01l _bqhtq049",
43
- none: "_ochr1j28 _195e1j28 _bqht3sij"
40
+ standard: "_1p9x1p6i _qao9r01l _q433q049",
41
+ subtle: "_1p9x1p6i _qao9r01l _q433q049",
42
+ none: "_1p9x1j28 _qao91j28 _q4333sij"
44
43
  };
45
44
  var hoverStyle = {
46
45
  standard: "_4cvx1elr _irr31d5g",
@@ -48,9 +47,9 @@ var hoverStyle = {
48
47
  none: "_4cvx1j28 _irr31j28"
49
48
  };
50
49
  var getContainerTextBgAndBorderColor = {
51
- standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _srjtgir2",
52
- subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2",
53
- none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2"
50
+ standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _msj6gir2",
51
+ subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2",
52
+ none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2"
54
53
  };
55
54
  var widthMap = {
56
55
  xsmall: 80,
@@ -158,7 +157,7 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
158
157
  "data-testid": testId && "".concat(testId, "-container"),
159
158
  onMouseDown: handleOnMouseDown,
160
159
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
161
- className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnq1l7b", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qs13x5 _1dbz13x5 _10j7r01l", className]),
160
+ className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnq1l7b", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qs13x5 _1dbz13x5 _uk1sr01l", className]),
162
161
  style: {
163
162
  maxWidth: "".concat(getMaxWidth(width)),
164
163
  "--_x5k4n9": (0, _runtime.ix)("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, #E2483D)"))
@@ -166,7 +165,6 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
166
165
  }, elemBeforeInput, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, spreadProps, {
167
166
  "aria-invalid": isInvalid ? isInvalid : undefined
168
167
  // TODO: When removing legacy theming fix this.
169
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
170
168
  ,
171
169
 
172
170
  "data-compact": isCompact ? isCompact : undefined,
package/dist/es2019/text-field.compiled.css CHANGED
@@ -1,4 +1,3 @@
1
-
2
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)}
3
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
4
3
  ._19itidpf{border:0}
@@ -11,6 +10,8 @@
11
10
  ._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
12
11
  ._1h6d1j28{border-color:transparent}
13
12
  ._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
13
+ ._1p9x1j28._1p9x1j28:has(input:focus){border-color:transparent}
14
+ ._1p9x1p6i._1p9x1p6i:has(input:focus){border-color:var(--ds-border-focused,#388bff)}
14
15
  ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
15
16
  ._12ji1r31{outline-color:currentColor}
16
17
  ._12y31o36{outline-width:medium}
@@ -57,23 +58,22 @@
57
58
  ._lcxv1wug{pointer-events:auto}
58
59
  ._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
59
60
  ._olc6u2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}
61
+ ._q4333sij._q4333sij:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
62
+ ._q433q049._q433q049:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
63
+ ._qao91j28._qao91j28:has(input:focus){background-color:transparent}
64
+ ._qao9r01l._qao9r01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
60
65
  ._s7n4jp4b{vertical-align:top}
61
66
  ._slp31hna{word-wrap:break-word}
62
67
  ._syaz1fxt{color:var(--ds-text,#172b4d)}
63
68
  ._syaz1kw7{color:inherit}
64
69
  ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
70
+ ._uk1sr01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
65
71
  ._vchhusvi{box-sizing:border-box}
66
72
  ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
67
73
  ._y4tiidpf{padding-inline-end:0}
68
- ._ochr1j28._ochr1j28:focus-within{border-color:transparent}
69
- ._ochr1p6i._ochr1p6i:focus-within{border-color:var(--ds-border-focused,#388bff)}._10j7r01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
70
- ._195e1j28._195e1j28:focus-within{background-color:transparent}
71
- ._195er01l._195er01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
72
- ._bqht3sij._bqht3sij:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
73
- ._bqhtq049._bqhtq049:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
74
74
  ._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
75
75
  ._4cvx1j28:hover{border-color:transparent}
76
76
  ._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
77
77
  ._irr31j28:hover{background-color:transparent}
78
- @media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._srjtgir2:focus-within{border-color:Highlight}}
78
+ @media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._msj6gir2:has(input:focus){border-color:Highlight}}
79
79
  @media (min-width:30rem){._14md1odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}._1srd1b66[data-compact]{padding-block-end:var(--ds-space-050,4px)}._oi9h1b66[data-compact]{padding-block-start:var(--ds-space-050,4px)}._1e3012x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}._1txv12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}._1tn22smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._l9oiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}._549yu2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}._1h5w12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}._124212x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}}
package/dist/es2019/text-field.js CHANGED
@@ -6,14 +6,14 @@ import React, { forwardRef, useCallback, useRef } from 'react';
6
6
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
7
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
8
  const containerMedia = {
9
- invalid: "_srjtgir2",
9
+ invalid: "_msj6gir2",
10
10
  disabled: "_6up518qt"
11
11
  };
12
12
  const inputMediaDisabled = null;
13
13
  const analyticsParams = {
14
14
  componentName: 'textField',
15
15
  packageName: "@atlaskit/textfield",
16
- packageVersion: "8.0.4"
16
+ packageVersion: "8.0.6"
17
17
  };
18
18
  const disabledStyle = {
19
19
  standard: "_1h6dsyzs _bfhksyzs _syaz1lh4 _80om13gf",
@@ -22,9 +22,9 @@ const disabledStyle = {
22
22
  };
23
23
  const invalidStyle = null;
24
24
  const focusWithinStyle = {
25
- standard: "_ochr1p6i _195er01l _bqhtq049",
26
- subtle: "_ochr1p6i _195er01l _bqhtq049",
27
- none: "_ochr1j28 _195e1j28 _bqht3sij"
25
+ standard: "_1p9x1p6i _qao9r01l _q433q049",
26
+ subtle: "_1p9x1p6i _qao9r01l _q433q049",
27
+ none: "_1p9x1j28 _qao91j28 _q4333sij"
28
28
  };
29
29
  const hoverStyle = {
30
30
  standard: "_4cvx1elr _irr31d5g",
@@ -32,9 +32,9 @@ const hoverStyle = {
32
32
  none: "_4cvx1j28 _irr31j28"
33
33
  };
34
34
  const getContainerTextBgAndBorderColor = {
35
- standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _srjtgir2",
36
- subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2",
37
- none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2"
35
+ standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _msj6gir2",
36
+ subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2",
37
+ none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2"
38
38
  };
39
39
  const widthMap = {
40
40
  xsmall: 80,
@@ -140,11 +140,10 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
140
140
  maxWidth: `${getMaxWidth(width)}`
141
141
  },
142
142
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
143
- className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnq1l7b", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _10j7r01l", className])
143
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnq1l7b", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _uk1sr01l", className])
144
144
  }, elemBeforeInput, /*#__PURE__*/React.createElement("input", _extends({}, spreadProps, {
145
145
  "aria-invalid": isInvalid ? isInvalid : undefined
146
146
  // TODO: When removing legacy theming fix this.
147
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
148
147
  ,
149
148
 
150
149
  "data-compact": isCompact ? isCompact : undefined,
package/dist/esm/text-field.compiled.css CHANGED
@@ -1,4 +1,3 @@
1
-
2
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)}
3
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
4
3
  ._19itidpf{border:0}
@@ -11,6 +10,8 @@
11
10
  ._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
12
11
  ._1h6d1j28{border-color:transparent}
13
12
  ._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
13
+ ._1p9x1j28._1p9x1j28:has(input:focus){border-color:transparent}
14
+ ._1p9x1p6i._1p9x1p6i:has(input:focus){border-color:var(--ds-border-focused,#388bff)}
14
15
  ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
15
16
  ._12ji1r31{outline-color:currentColor}
16
17
  ._12y31o36{outline-width:medium}
@@ -57,23 +58,22 @@
57
58
  ._lcxv1wug{pointer-events:auto}
58
59
  ._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
59
60
  ._olc6u2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}
61
+ ._q4333sij._q4333sij:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
62
+ ._q433q049._q433q049:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
63
+ ._qao91j28._qao91j28:has(input:focus){background-color:transparent}
64
+ ._qao9r01l._qao9r01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
60
65
  ._s7n4jp4b{vertical-align:top}
61
66
  ._slp31hna{word-wrap:break-word}
62
67
  ._syaz1fxt{color:var(--ds-text,#172b4d)}
63
68
  ._syaz1kw7{color:inherit}
64
69
  ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
70
+ ._uk1sr01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
65
71
  ._vchhusvi{box-sizing:border-box}
66
72
  ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
67
73
  ._y4tiidpf{padding-inline-end:0}
68
- ._ochr1j28._ochr1j28:focus-within{border-color:transparent}
69
- ._ochr1p6i._ochr1p6i:focus-within{border-color:var(--ds-border-focused,#388bff)}._10j7r01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
70
- ._195e1j28._195e1j28:focus-within{background-color:transparent}
71
- ._195er01l._195er01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
72
- ._bqht3sij._bqht3sij:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
73
- ._bqhtq049._bqhtq049:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
74
74
  ._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
75
75
  ._4cvx1j28:hover{border-color:transparent}
76
76
  ._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
77
77
  ._irr31j28:hover{background-color:transparent}
78
- @media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._srjtgir2:focus-within{border-color:Highlight}}
78
+ @media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._msj6gir2:has(input:focus){border-color:Highlight}}
79
79
  @media (min-width:30rem){._14md1odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}._1srd1b66[data-compact]{padding-block-end:var(--ds-space-050,4px)}._oi9h1b66[data-compact]{padding-block-start:var(--ds-space-050,4px)}._1e3012x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}._1txv12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}._1tn22smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._l9oiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}._549yu2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}._1h5w12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}._124212x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}}
package/dist/esm/text-field.js CHANGED
@@ -12,14 +12,14 @@ import React, { forwardRef, useCallback, useRef } from 'react';
12
12
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
13
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
14
  var containerMedia = {
15
- invalid: "_srjtgir2",
15
+ invalid: "_msj6gir2",
16
16
  disabled: "_6up518qt"
17
17
  };
18
18
  var inputMediaDisabled = null;
19
19
  var analyticsParams = {
20
20
  componentName: 'textField',
21
21
  packageName: "@atlaskit/textfield",
22
- packageVersion: "8.0.4"
22
+ packageVersion: "8.0.6"
23
23
  };
24
24
  var disabledStyle = {
25
25
  standard: "_1h6dsyzs _bfhksyzs _syaz1lh4 _80om13gf",
@@ -28,9 +28,9 @@ var disabledStyle = {
28
28
  };
29
29
  var invalidStyle = null;
30
30
  var focusWithinStyle = {
31
- standard: "_ochr1p6i _195er01l _bqhtq049",
32
- subtle: "_ochr1p6i _195er01l _bqhtq049",
33
- none: "_ochr1j28 _195e1j28 _bqht3sij"
31
+ standard: "_1p9x1p6i _qao9r01l _q433q049",
32
+ subtle: "_1p9x1p6i _qao9r01l _q433q049",
33
+ none: "_1p9x1j28 _qao91j28 _q4333sij"
34
34
  };
35
35
  var hoverStyle = {
36
36
  standard: "_4cvx1elr _irr31d5g",
@@ -38,9 +38,9 @@ var hoverStyle = {
38
38
  none: "_4cvx1j28 _irr31j28"
39
39
  };
40
40
  var getContainerTextBgAndBorderColor = {
41
- standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _srjtgir2",
42
- subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2",
43
- none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2"
41
+ standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _msj6gir2",
42
+ subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2",
43
+ none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2"
44
44
  };
45
45
  var widthMap = {
46
46
  xsmall: 80,
@@ -148,7 +148,7 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
148
148
  "data-testid": testId && "".concat(testId, "-container"),
149
149
  onMouseDown: handleOnMouseDown,
150
150
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
151
- className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnq1l7b", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qs13x5 _1dbz13x5 _10j7r01l", className]),
151
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnq1l7b", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qs13x5 _1dbz13x5 _uk1sr01l", className]),
152
152
  style: {
153
153
  maxWidth: "".concat(getMaxWidth(width)),
154
154
  "--_x5k4n9": ix("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, #E2483D)"))
@@ -156,7 +156,6 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
156
156
  }, elemBeforeInput, /*#__PURE__*/React.createElement("input", _extends({}, spreadProps, {
157
157
  "aria-invalid": isInvalid ? isInvalid : undefined
158
158
  // TODO: When removing legacy theming fix this.
159
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
160
159
  ,
161
160
 
162
161
  "data-compact": isCompact ? isCompact : undefined,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "8.0.4",
3
+ "version": "8.0.6",
4
4
  "description": "A text field is an input that allows a user to write or edit text.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -25,10 +25,10 @@
25
25
  }
26
26
  },
27
27
  "dependencies": {
28
- "@atlaskit/analytics-next": "^11.0.0",
28
+ "@atlaskit/analytics-next": "^11.1.0",
29
29
  "@atlaskit/platform-feature-flags": "^1.1.0",
30
30
  "@atlaskit/theme": "^18.0.0",
31
- "@atlaskit/tokens": "^4.5.0",
31
+ "@atlaskit/tokens": "^5.0.0",
32
32
  "@babel/runtime": "^7.0.0",
33
33
  "@compiled/react": "^0.18.3"
34
34
  },
@@ -36,19 +36,20 @@
36
36
  "react": "^18.2.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@af/accessibility-testing": "^2.0.0",
40
- "@af/integration-testing": "^0.5.0",
41
- "@af/visual-regression": "^1.3.0",
42
- "@atlaskit/avatar": "^25.0.0",
43
- "@atlaskit/button": "^21.1.0",
39
+ "@af/accessibility-testing": "workspace:^",
40
+ "@af/integration-testing": "workspace:^",
41
+ "@af/visual-regression": "workspace:^",
42
+ "@atlaskit/avatar": "^25.1.0",
43
+ "@atlaskit/button": "^23.2.0",
44
44
  "@atlaskit/docs": "^10.0.0",
45
45
  "@atlaskit/ds-lib": "^4.0.0",
46
46
  "@atlaskit/form": "^12.0.0",
47
- "@atlaskit/icon": "^25.0.0",
48
- "@atlaskit/link": "^3.0.0",
49
- "@atlaskit/primitives": "^14.2.0",
47
+ "@atlaskit/icon": "^26.4.0",
48
+ "@atlaskit/link": "^3.2.0",
49
+ "@atlaskit/primitives": "^14.8.0",
50
50
  "@atlaskit/section-message": "^8.2.0",
51
- "@atlaskit/ssr": "^0.4.0",
51
+ "@atlaskit/ssr": "workspace:^",
52
+ "@atlassian/ssr-tests": "^0.2.0",
52
53
  "@testing-library/react": "^13.4.0",
53
54
  "@testing-library/user-event": "^14.4.3",
54
55
  "react-dom": "^18.2.0",