@atlaskit/textfield 5.3.4 → 5.3.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 CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 5.3.5
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
3
9
  ## 5.3.4
4
10
 
5
11
  ### Patch Changes
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.transparent = exports.textColor = exports.subtleBorderColorHover = exports.placeholderTextColor = exports.disabledTextColor = exports.disabledBackgroundColor = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
7
-
8
7
  var _colors = require("@atlaskit/theme/colors");
9
-
10
8
  var disabledBackgroundColor = {
11
9
  light: "var(--ds-background-disabled, ".concat(_colors.N10, ")"),
12
10
  dark: "var(--ds-background-disabled, ".concat(_colors.DN10, ")")
package/dist/cjs/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "default", {
17
16
  return _textField.default;
18
17
  }
19
18
  });
20
-
21
19
  var _textField = _interopRequireDefault(require("./text-field"));
22
-
23
20
  var _styles = require("./styles");
@@ -1,30 +1,19 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.textFieldColors = exports.inputStyles = exports.containerStyles = void 0;
11
-
12
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
10
  var _colors = require("@atlaskit/theme/colors");
15
-
16
11
  var _constants = require("@atlaskit/theme/constants");
17
-
18
12
  var componentTokens = _interopRequireWildcard(require("./component-tokens"));
19
-
20
13
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
-
22
14
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
-
24
15
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
25
-
26
16
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
27
-
28
17
  var fontSize = (0, _constants.fontSize)();
29
18
  var gridSize = (0, _constants.gridSize)();
30
19
  var disabledRules = {
@@ -91,7 +80,6 @@ var borderColorHover = {
91
80
  subtle: componentTokens.subtleBorderColorHover,
92
81
  none: componentTokens.transparent
93
82
  };
94
-
95
83
  var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance, mode) {
96
84
  return {
97
85
  backgroundColor: backgroundColor[appearance][mode],
@@ -133,7 +121,6 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
133
121
  }
134
122
  };
135
123
  };
136
-
137
124
  var widthMap = {
138
125
  xsmall: 80,
139
126
  small: 160,
@@ -141,11 +128,9 @@ var widthMap = {
141
128
  large: 320,
142
129
  xlarge: 480
143
130
  };
144
-
145
131
  var getMaxWidth = function getMaxWidth(width) {
146
132
  return !width ? "100%" : width in widthMap ? widthMap[width] : +width;
147
133
  };
148
-
149
134
  var containerStyles = function containerStyles(appearance, mode, width) {
150
135
  return _objectSpread(_objectSpread({
151
136
  alignItems: 'center'
@@ -166,9 +151,7 @@ var containerStyles = function containerStyles(appearance, mode, width) {
166
151
  pointerEvents: 'auto'
167
152
  });
168
153
  };
169
-
170
154
  exports.containerStyles = containerStyles;
171
-
172
155
  var inputStyles = function inputStyles(mode) {
173
156
  return {
174
157
  backgroundColor: 'transparent',
@@ -218,9 +201,9 @@ var inputStyles = function inputStyles(mode) {
218
201
  }
219
202
  }
220
203
  };
221
- }; // TODO: Remove when removing legacy theming.
222
-
204
+ };
223
205
 
206
+ // TODO: Remove when removing legacy theming.
224
207
  exports.inputStyles = inputStyles;
225
208
  var textFieldColors = {
226
209
  backgroundColor: backgroundColor,
@@ -1,76 +1,57 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.default = void 0;
11
-
12
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
-
14
10
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
11
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
17
-
18
12
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
19
-
20
13
  var _react = _interopRequireWildcard(require("react"));
21
-
22
14
  var _react2 = require("@emotion/react");
23
-
24
15
  var _analyticsNext = require("@atlaskit/analytics-next");
25
-
26
16
  var _components = require("@atlaskit/theme/components");
27
-
28
17
  var _styles = require("./styles");
29
-
30
18
  var _excluded = ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"];
31
-
32
19
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
33
-
34
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
-
36
21
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
37
-
38
22
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
39
-
40
23
  var analyticsParams = {
41
24
  componentName: 'textField',
42
25
  packageName: "@atlaskit/textfield",
43
- packageVersion: "5.3.4"
26
+ packageVersion: "5.3.5"
44
27
  };
45
28
  var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
46
29
  var _props$appearance = props.appearance,
47
- appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
48
- _props$isCompact = props.isCompact,
49
- isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
50
- _props$isDisabled = props.isDisabled,
51
- isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
52
- _props$isInvalid = props.isInvalid,
53
- isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
54
- _props$isRequired = props.isRequired,
55
- isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
56
- _props$isReadOnly = props.isReadOnly,
57
- isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
58
- _props$isMonospaced = props.isMonospaced,
59
- isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
60
- width = props.width,
61
- elemAfterInput = props.elemAfterInput,
62
- elemBeforeInput = props.elemBeforeInput,
63
- testId = props.testId,
64
- onFocus = props.onFocus,
65
- onBlur = props.onBlur,
66
- onMouseDown = props.onMouseDown,
67
- className = props.className,
68
- spreadProps = (0, _objectWithoutProperties2.default)(props, _excluded);
30
+ appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
31
+ _props$isCompact = props.isCompact,
32
+ isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
33
+ _props$isDisabled = props.isDisabled,
34
+ isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
35
+ _props$isInvalid = props.isInvalid,
36
+ isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
37
+ _props$isRequired = props.isRequired,
38
+ isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
39
+ _props$isReadOnly = props.isReadOnly,
40
+ isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
41
+ _props$isMonospaced = props.isMonospaced,
42
+ isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
43
+ width = props.width,
44
+ elemAfterInput = props.elemAfterInput,
45
+ elemBeforeInput = props.elemBeforeInput,
46
+ testId = props.testId,
47
+ onFocus = props.onFocus,
48
+ onBlur = props.onBlur,
49
+ onMouseDown = props.onMouseDown,
50
+ className = props.className,
51
+ spreadProps = (0, _objectWithoutProperties2.default)(props, _excluded);
69
52
  var inputRef = (0, _react.useRef)(null);
70
-
71
53
  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
72
- mode = _useGlobalTheme.mode;
73
-
54
+ mode = _useGlobalTheme.mode;
74
55
  var handleOnFocus = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
75
56
  fn: function fn(event) {
76
57
  onFocus && onFocus(event);
@@ -87,24 +68,19 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
87
68
  // Running e.preventDefault() on the INPUT prevents double click behaviour
88
69
  // Sadly we needed this cast as the target type is being correctly set
89
70
  var target = event.target;
90
-
91
71
  if (target.tagName !== 'INPUT') {
92
72
  event.preventDefault();
93
73
  }
94
-
95
74
  if (inputRef && inputRef.current && !isDisabled && document.activeElement !== inputRef.current) {
96
75
  inputRef.current.focus();
97
76
  }
98
-
99
77
  onMouseDown && onMouseDown(event);
100
78
  }, [onMouseDown, isDisabled]);
101
79
  var setInputRef = (0, _react.useCallback)(function (inputElement) {
102
80
  inputRef.current = inputElement;
103
-
104
81
  if (!ref) {
105
82
  return;
106
83
  }
107
-
108
84
  if ((0, _typeof2.default)(ref) === 'object') {
109
85
  // This is a blunder on the part of @types/react
110
86
  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
@@ -112,7 +88,6 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
112
88
  // @ts-expect-error
113
89
  ref.current = inputElement;
114
90
  }
115
-
116
91
  if (typeof ref === 'function') {
117
92
  ref(inputElement);
118
93
  }
@@ -123,14 +98,16 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
123
98
  var inputStyle = (0, _react.useMemo)(function () {
124
99
  return (0, _styles.inputStyles)(mode);
125
100
  }, [mode]);
126
- return (// We use event bubbling here to listen to any child element mouse down event.
101
+ return (
102
+ // We use event bubbling here to listen to any child element mouse down event.
127
103
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
128
104
  (0, _react2.jsx)("div", {
129
105
  "data-disabled": isDisabled ? isDisabled : undefined,
130
106
  "data-invalid": isInvalid ? isInvalid : undefined,
131
107
  "data-ds--text-field--container": true,
132
108
  "data-testid": testId && "".concat(testId, "-container"),
133
- onMouseDown: handleOnMouseDown // TODO: When removing legacy theming fix this.
109
+ onMouseDown: handleOnMouseDown
110
+ // TODO: When removing legacy theming fix this.
134
111
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
135
112
  ,
136
113
  css: containerStyles,
@@ -146,7 +123,8 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
146
123
  required: isRequired,
147
124
  onBlur: handleOnBlur,
148
125
  onFocus: handleOnFocus,
149
- ref: setInputRef // TODO: When removing legacy theming fix this.
126
+ ref: setInputRef
127
+ // TODO: When removing legacy theming fix this.
150
128
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
151
129
  ,
152
130
  css: inputStyle
@@ -154,6 +132,7 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
154
132
  );
155
133
  });
156
134
  Textfield.displayName = 'Textfield';
135
+
157
136
  /**
158
137
  * __Textfield__
159
138
  *
@@ -163,9 +142,6 @@ Textfield.displayName = 'Textfield';
163
142
  * - [Code](https://atlassian.design/components/textfield/code)
164
143
  * - [Usage](https://atlassian.design/components/textfield/usage)
165
144
  */
166
-
167
145
  var _default = /*#__PURE__*/(0, _react.memo)(Textfield); // The above generic is used to let ERTC know what props to extract.
168
146
  // See: https://github.com/atlassian/extract-react-types/issues/201
169
-
170
-
171
147
  exports.default = _default;
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.3.4",
3
+ "version": "5.3.5",
4
4
  "sideEffects": false
5
5
  }
@@ -67,7 +67,6 @@ const borderColorHover = {
67
67
  subtle: componentTokens.subtleBorderColorHover,
68
68
  none: componentTokens.transparent
69
69
  };
70
-
71
70
  const getContainerTextBgAndBorderColor = (appearance, mode) => ({
72
71
  backgroundColor: backgroundColor[appearance][mode],
73
72
  borderColor: borderColor[appearance][mode],
@@ -110,7 +109,6 @@ const getContainerTextBgAndBorderColor = (appearance, mode) => ({
110
109
  }
111
110
  }
112
111
  });
113
-
114
112
  const widthMap = {
115
113
  xsmall: 80,
116
114
  small: 160,
@@ -118,9 +116,7 @@ const widthMap = {
118
116
  large: 320,
119
117
  xlarge: 480
120
118
  };
121
-
122
119
  const getMaxWidth = width => !width ? `100%` : width in widthMap ? widthMap[width] : +width;
123
-
124
120
  export const containerStyles = (appearance, mode, width) => ({
125
121
  alignItems: 'center',
126
122
  ...getContainerTextBgAndBorderColor(appearance, mode),
@@ -186,8 +182,9 @@ export const inputStyles = mode => ({
186
182
  color: 'GrayText'
187
183
  }
188
184
  }
189
- }); // TODO: Remove when removing legacy theming.
185
+ });
190
186
 
187
+ // TODO: Remove when removing legacy theming.
191
188
  export const textFieldColors = {
192
189
  backgroundColor,
193
190
  backgroundColorFocus,
@@ -1,5 +1,4 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
-
3
2
  /** @jsx jsx */
4
3
  import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
5
4
  import { jsx } from '@emotion/react';
@@ -9,7 +8,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
9
8
  const analyticsParams = {
10
9
  componentName: 'textField',
11
10
  packageName: "@atlaskit/textfield",
12
- packageVersion: "5.3.4"
11
+ packageVersion: "5.3.5"
13
12
  };
14
13
  const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
15
14
  const {
@@ -52,24 +51,19 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
52
51
  // Running e.preventDefault() on the INPUT prevents double click behaviour
53
52
  // Sadly we needed this cast as the target type is being correctly set
54
53
  const target = event.target;
55
-
56
54
  if (target.tagName !== 'INPUT') {
57
55
  event.preventDefault();
58
56
  }
59
-
60
57
  if (inputRef && inputRef.current && !isDisabled && document.activeElement !== inputRef.current) {
61
58
  inputRef.current.focus();
62
59
  }
63
-
64
60
  onMouseDown && onMouseDown(event);
65
61
  }, [onMouseDown, isDisabled]);
66
62
  const setInputRef = useCallback(inputElement => {
67
63
  inputRef.current = inputElement;
68
-
69
64
  if (!ref) {
70
65
  return;
71
66
  }
72
-
73
67
  if (typeof ref === 'object') {
74
68
  // This is a blunder on the part of @types/react
75
69
  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
@@ -77,21 +71,22 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
77
71
  // @ts-expect-error
78
72
  ref.current = inputElement;
79
73
  }
80
-
81
74
  if (typeof ref === 'function') {
82
75
  ref(inputElement);
83
76
  }
84
77
  }, [ref]);
85
78
  const containerStyles = useMemo(() => getContainerStyles(appearance, mode, width), [appearance, mode, width]);
86
79
  const inputStyle = useMemo(() => getInputStyles(mode), [mode]);
87
- return (// We use event bubbling here to listen to any child element mouse down event.
80
+ return (
81
+ // We use event bubbling here to listen to any child element mouse down event.
88
82
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
89
83
  jsx("div", {
90
84
  "data-disabled": isDisabled ? isDisabled : undefined,
91
85
  "data-invalid": isInvalid ? isInvalid : undefined,
92
86
  "data-ds--text-field--container": true,
93
87
  "data-testid": testId && `${testId}-container`,
94
- onMouseDown: handleOnMouseDown // TODO: When removing legacy theming fix this.
88
+ onMouseDown: handleOnMouseDown
89
+ // TODO: When removing legacy theming fix this.
95
90
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
96
91
  ,
97
92
  css: containerStyles,
@@ -107,7 +102,8 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
107
102
  required: isRequired,
108
103
  onBlur: handleOnBlur,
109
104
  onFocus: handleOnFocus,
110
- ref: setInputRef // TODO: When removing legacy theming fix this.
105
+ ref: setInputRef
106
+ // TODO: When removing legacy theming fix this.
111
107
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
112
108
  ,
113
109
  css: inputStyle
@@ -115,6 +111,7 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
115
111
  );
116
112
  });
117
113
  Textfield.displayName = 'Textfield';
114
+
118
115
  /**
119
116
  * __Textfield__
120
117
  *
@@ -124,6 +121,6 @@ Textfield.displayName = 'Textfield';
124
121
  * - [Code](https://atlassian.design/components/textfield/code)
125
122
  * - [Usage](https://atlassian.design/components/textfield/usage)
126
123
  */
127
-
128
- export default /*#__PURE__*/memo(Textfield); // The above generic is used to let ERTC know what props to extract.
124
+ export default /*#__PURE__*/memo(Textfield);
125
+ // The above generic is used to let ERTC know what props to extract.
129
126
  // See: https://github.com/atlassian/extract-react-types/issues/201
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.3.4",
3
+ "version": "5.3.5",
4
4
  "sideEffects": false
5
5
  }
@@ -1,9 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
-
3
2
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
-
5
3
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
-
7
4
  import { R400 } from '@atlaskit/theme/colors';
8
5
  import { codeFontFamily, fontFamily, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
9
6
  import * as componentTokens from './component-tokens';
@@ -73,7 +70,6 @@ var borderColorHover = {
73
70
  subtle: componentTokens.subtleBorderColorHover,
74
71
  none: componentTokens.transparent
75
72
  };
76
-
77
73
  var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance, mode) {
78
74
  return {
79
75
  backgroundColor: backgroundColor[appearance][mode],
@@ -115,7 +111,6 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
115
111
  }
116
112
  };
117
113
  };
118
-
119
114
  var widthMap = {
120
115
  xsmall: 80,
121
116
  small: 160,
@@ -123,11 +118,9 @@ var widthMap = {
123
118
  large: 320,
124
119
  xlarge: 480
125
120
  };
126
-
127
121
  var getMaxWidth = function getMaxWidth(width) {
128
122
  return !width ? "100%" : width in widthMap ? widthMap[width] : +width;
129
123
  };
130
-
131
124
  export var containerStyles = function containerStyles(appearance, mode, width) {
132
125
  return _objectSpread(_objectSpread({
133
126
  alignItems: 'center'
@@ -197,8 +190,9 @@ export var inputStyles = function inputStyles(mode) {
197
190
  }
198
191
  }
199
192
  };
200
- }; // TODO: Remove when removing legacy theming.
193
+ };
201
194
 
195
+ // TODO: Remove when removing legacy theming.
202
196
  export var textFieldColors = {
203
197
  backgroundColor: backgroundColor,
204
198
  backgroundColorFocus: backgroundColorFocus,
@@ -3,11 +3,8 @@ import _typeof from "@babel/runtime/helpers/typeof";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
5
  var _excluded = ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"];
6
-
7
6
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
8
-
9
7
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
10
-
11
8
  /** @jsx jsx */
12
9
  import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
13
10
  import { jsx } from '@emotion/react';
@@ -17,38 +14,35 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
17
14
  var analyticsParams = {
18
15
  componentName: 'textField',
19
16
  packageName: "@atlaskit/textfield",
20
- packageVersion: "5.3.4"
17
+ packageVersion: "5.3.5"
21
18
  };
22
19
  var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
23
20
  var _props$appearance = props.appearance,
24
- appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
25
- _props$isCompact = props.isCompact,
26
- isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
27
- _props$isDisabled = props.isDisabled,
28
- isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
29
- _props$isInvalid = props.isInvalid,
30
- isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
31
- _props$isRequired = props.isRequired,
32
- isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
33
- _props$isReadOnly = props.isReadOnly,
34
- isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
35
- _props$isMonospaced = props.isMonospaced,
36
- isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
37
- width = props.width,
38
- elemAfterInput = props.elemAfterInput,
39
- elemBeforeInput = props.elemBeforeInput,
40
- testId = props.testId,
41
- onFocus = props.onFocus,
42
- onBlur = props.onBlur,
43
- onMouseDown = props.onMouseDown,
44
- className = props.className,
45
- spreadProps = _objectWithoutProperties(props, _excluded);
46
-
21
+ appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
22
+ _props$isCompact = props.isCompact,
23
+ isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
24
+ _props$isDisabled = props.isDisabled,
25
+ isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
26
+ _props$isInvalid = props.isInvalid,
27
+ isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
28
+ _props$isRequired = props.isRequired,
29
+ isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
30
+ _props$isReadOnly = props.isReadOnly,
31
+ isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
32
+ _props$isMonospaced = props.isMonospaced,
33
+ isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
34
+ width = props.width,
35
+ elemAfterInput = props.elemAfterInput,
36
+ elemBeforeInput = props.elemBeforeInput,
37
+ testId = props.testId,
38
+ onFocus = props.onFocus,
39
+ onBlur = props.onBlur,
40
+ onMouseDown = props.onMouseDown,
41
+ className = props.className,
42
+ spreadProps = _objectWithoutProperties(props, _excluded);
47
43
  var inputRef = useRef(null);
48
-
49
44
  var _useGlobalTheme = useGlobalTheme(),
50
- mode = _useGlobalTheme.mode;
51
-
45
+ mode = _useGlobalTheme.mode;
52
46
  var handleOnFocus = usePlatformLeafEventHandler(_objectSpread({
53
47
  fn: function fn(event) {
54
48
  onFocus && onFocus(event);
@@ -65,24 +59,19 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
65
59
  // Running e.preventDefault() on the INPUT prevents double click behaviour
66
60
  // Sadly we needed this cast as the target type is being correctly set
67
61
  var target = event.target;
68
-
69
62
  if (target.tagName !== 'INPUT') {
70
63
  event.preventDefault();
71
64
  }
72
-
73
65
  if (inputRef && inputRef.current && !isDisabled && document.activeElement !== inputRef.current) {
74
66
  inputRef.current.focus();
75
67
  }
76
-
77
68
  onMouseDown && onMouseDown(event);
78
69
  }, [onMouseDown, isDisabled]);
79
70
  var setInputRef = useCallback(function (inputElement) {
80
71
  inputRef.current = inputElement;
81
-
82
72
  if (!ref) {
83
73
  return;
84
74
  }
85
-
86
75
  if (_typeof(ref) === 'object') {
87
76
  // This is a blunder on the part of @types/react
88
77
  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
@@ -90,7 +79,6 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
90
79
  // @ts-expect-error
91
80
  ref.current = inputElement;
92
81
  }
93
-
94
82
  if (typeof ref === 'function') {
95
83
  ref(inputElement);
96
84
  }
@@ -101,14 +89,16 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
101
89
  var inputStyle = useMemo(function () {
102
90
  return getInputStyles(mode);
103
91
  }, [mode]);
104
- return (// We use event bubbling here to listen to any child element mouse down event.
92
+ return (
93
+ // We use event bubbling here to listen to any child element mouse down event.
105
94
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
106
95
  jsx("div", {
107
96
  "data-disabled": isDisabled ? isDisabled : undefined,
108
97
  "data-invalid": isInvalid ? isInvalid : undefined,
109
98
  "data-ds--text-field--container": true,
110
99
  "data-testid": testId && "".concat(testId, "-container"),
111
- onMouseDown: handleOnMouseDown // TODO: When removing legacy theming fix this.
100
+ onMouseDown: handleOnMouseDown
101
+ // TODO: When removing legacy theming fix this.
112
102
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
113
103
  ,
114
104
  css: containerStyles,
@@ -124,7 +114,8 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
124
114
  required: isRequired,
125
115
  onBlur: handleOnBlur,
126
116
  onFocus: handleOnFocus,
127
- ref: setInputRef // TODO: When removing legacy theming fix this.
117
+ ref: setInputRef
118
+ // TODO: When removing legacy theming fix this.
128
119
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
129
120
  ,
130
121
  css: inputStyle
@@ -132,6 +123,7 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
132
123
  );
133
124
  });
134
125
  Textfield.displayName = 'Textfield';
126
+
135
127
  /**
136
128
  * __Textfield__
137
129
  *
@@ -141,6 +133,6 @@ Textfield.displayName = 'Textfield';
141
133
  * - [Code](https://atlassian.design/components/textfield/code)
142
134
  * - [Usage](https://atlassian.design/components/textfield/usage)
143
135
  */
144
-
145
- export default /*#__PURE__*/memo(Textfield); // The above generic is used to let ERTC know what props to extract.
136
+ export default /*#__PURE__*/memo(Textfield);
137
+ // The above generic is used to let ERTC know what props to extract.
146
138
  // See: https://github.com/atlassian/extract-react-types/issues/201
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.3.4",
3
+ "version": "5.3.5",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.3.4",
3
+ "version": "5.3.5",
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/"
@@ -29,7 +29,7 @@
29
29
  "dependencies": {
30
30
  "@atlaskit/analytics-next": "^8.2.0",
31
31
  "@atlaskit/theme": "^12.2.0",
32
- "@atlaskit/tokens": "^0.13.0",
32
+ "@atlaskit/tokens": "^1.0.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@emotion/react": "^11.7.1"
35
35
  },
package/report.api.md CHANGED
@@ -1,4 +1,4 @@
1
- <!-- API Report Version: 2.2 -->
1
+ <!-- API Report Version: 2.3 -->
2
2
 
3
3
  ## API Report File for "@atlaskit/textfield"
4
4