@atlaskit/textfield 6.3.0 → 6.4.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.
- package/CHANGELOG.md +598 -578
- package/__perf__/examples.tsx +34 -37
- package/codemods/5.0.0-lite-mode.tsx +5 -8
- package/codemods/__tests__/5.0.0-lite-mode.tsx +14 -14
- package/codemods/__tests__/remove-imports.tsx +29 -31
- package/codemods/__tests__/remove-prop.tsx +28 -28
- package/codemods/__tests__/rename-disabled-to-isdisabled.tsx +28 -28
- package/codemods/__tests__/rename-imports.tsx +45 -48
- package/codemods/migrations/remove-imports.tsx +3 -3
- package/codemods/migrations/rename-disabled-to-isdisabled.tsx +1 -5
- package/codemods/migrations/rename-imports.tsx +8 -8
- package/codemods/migrations/utils.tsx +279 -320
- package/dist/cjs/styles.js +5 -12
- package/dist/cjs/text-field.js +8 -2
- package/dist/es2019/styles.js +5 -14
- package/dist/es2019/text-field.js +9 -2
- package/dist/esm/styles.js +5 -14
- package/dist/esm/text-field.js +9 -2
- package/dist/types/styles.d.ts +4 -8
- package/dist/types/text-field.d.ts +4 -1
- package/dist/types/types.d.ts +1 -1
- package/dist/types-ts4.5/styles.d.ts +4 -8
- package/dist/types-ts4.5/text-field.d.ts +4 -1
- package/dist/types-ts4.5/types.d.ts +1 -1
- package/package.json +92 -94
- package/report.api.md +21 -23
package/dist/cjs/styles.js
CHANGED
|
@@ -7,11 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.inputStyles = exports.containerStyles = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _colors = require("@atlaskit/theme/colors");
|
|
10
|
-
var _constants = require("@atlaskit/theme/constants");
|
|
11
10
|
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; }
|
|
12
11
|
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; }
|
|
13
|
-
var fontSize = (0, _constants.fontSize)();
|
|
14
|
-
var gridSize = (0, _constants.gridSize)();
|
|
15
12
|
var backgroundColor = {
|
|
16
13
|
standard: "var(--ds-background-input, ".concat(_colors.N10, ")"),
|
|
17
14
|
subtle: 'transparent',
|
|
@@ -109,7 +106,7 @@ var containerStyles = exports.containerStyles = function containerStyles(appeara
|
|
|
109
106
|
boxSizing: 'border-box',
|
|
110
107
|
display: 'flex',
|
|
111
108
|
flex: '1 1 100%',
|
|
112
|
-
|
|
109
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
113
110
|
justifyContent: 'space-between',
|
|
114
111
|
maxWidth: getMaxWidth(width),
|
|
115
112
|
overflow: 'hidden',
|
|
@@ -126,22 +123,18 @@ var inputStyles = exports.inputStyles = function inputStyles() {
|
|
|
126
123
|
boxSizing: 'border-box',
|
|
127
124
|
color: 'inherit',
|
|
128
125
|
cursor: 'inherit',
|
|
129
|
-
|
|
126
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
130
127
|
minWidth: '0',
|
|
131
128
|
outline: 'none',
|
|
132
129
|
width: '100%',
|
|
133
|
-
lineHeight: gridSize * 2.5 / fontSize,
|
|
134
|
-
fontFamily: (0, _constants.fontFamily)(),
|
|
135
130
|
'&[data-monospaced]': {
|
|
136
|
-
fontFamily: (
|
|
131
|
+
fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
|
|
137
132
|
},
|
|
138
133
|
'&[data-compact]': {
|
|
139
|
-
padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
|
|
140
|
-
height: "".concat((gridSize * 3.5 / fontSize).toFixed(2), "em")
|
|
134
|
+
padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
|
|
141
135
|
},
|
|
142
136
|
'&:not([data-compact])': {
|
|
143
|
-
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
|
|
144
|
-
height: "".concat((gridSize * 4.5 / fontSize).toFixed(2), "em")
|
|
137
|
+
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
|
|
145
138
|
},
|
|
146
139
|
'&[disabled]': {
|
|
147
140
|
// Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
|
package/dist/cjs/text-field.js
CHANGED
|
@@ -15,7 +15,11 @@ var _react2 = require("@emotion/react");
|
|
|
15
15
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
16
16
|
var _styles = require("./styles");
|
|
17
17
|
var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
|
|
18
|
+
/**
|
|
19
|
+
* @jsxRuntime classic
|
|
20
|
+
*/
|
|
18
21
|
/** @jsx jsx */
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
19
23
|
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); }
|
|
20
24
|
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 && Object.prototype.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; }
|
|
21
25
|
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,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
23
27
|
var analyticsParams = {
|
|
24
28
|
componentName: 'textField',
|
|
25
29
|
packageName: "@atlaskit/textfield",
|
|
26
|
-
packageVersion: "6.
|
|
30
|
+
packageVersion: "6.4.0"
|
|
27
31
|
};
|
|
28
32
|
var TextfieldComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
29
33
|
var _props$appearance = props.appearance,
|
|
@@ -111,7 +115,9 @@ var TextfieldComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
|
|
|
111
115
|
// TODO: When removing legacy theming fix this.
|
|
112
116
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
113
117
|
,
|
|
114
|
-
css: containerStyles
|
|
118
|
+
css: containerStyles
|
|
119
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
120
|
+
,
|
|
115
121
|
className: className
|
|
116
122
|
}, elemBeforeInput, (0, _react2.jsx)("input", (0, _extends2.default)({}, spreadProps, {
|
|
117
123
|
"aria-invalid": isInvalid ? isInvalid : undefined
|
package/dist/es2019/styles.js
CHANGED
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
import { B200, N0, N10, N100, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
|
|
2
|
-
import { codeFontFamily, fontFamily, fontSize as getFontSize,
|
|
3
|
-
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
4
|
-
gridSize as getGridSize } from '@atlaskit/theme/constants';
|
|
5
|
-
const fontSize = getFontSize();
|
|
6
|
-
const gridSize = getGridSize();
|
|
7
2
|
const backgroundColor = {
|
|
8
3
|
standard: `var(--ds-background-input, ${N10})`,
|
|
9
4
|
subtle: 'transparent',
|
|
@@ -100,7 +95,7 @@ export const containerStyles = (appearance, width) => ({
|
|
|
100
95
|
boxSizing: 'border-box',
|
|
101
96
|
display: 'flex',
|
|
102
97
|
flex: '1 1 100%',
|
|
103
|
-
|
|
98
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
104
99
|
justifyContent: 'space-between',
|
|
105
100
|
maxWidth: getMaxWidth(width),
|
|
106
101
|
overflow: 'hidden',
|
|
@@ -115,22 +110,18 @@ export const inputStyles = () => ({
|
|
|
115
110
|
boxSizing: 'border-box',
|
|
116
111
|
color: 'inherit',
|
|
117
112
|
cursor: 'inherit',
|
|
118
|
-
|
|
113
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
119
114
|
minWidth: '0',
|
|
120
115
|
outline: 'none',
|
|
121
116
|
width: '100%',
|
|
122
|
-
lineHeight: gridSize * 2.5 / fontSize,
|
|
123
|
-
fontFamily: fontFamily(),
|
|
124
117
|
'&[data-monospaced]': {
|
|
125
|
-
fontFamily:
|
|
118
|
+
fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
|
|
126
119
|
},
|
|
127
120
|
'&[data-compact]': {
|
|
128
|
-
padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}
|
|
129
|
-
height: `${(gridSize * 3.5 / fontSize).toFixed(2)}em`
|
|
121
|
+
padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`
|
|
130
122
|
},
|
|
131
123
|
'&:not([data-compact])': {
|
|
132
|
-
padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}
|
|
133
|
-
height: `${(gridSize * 4.5 / fontSize).toFixed(2)}em`
|
|
124
|
+
padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`
|
|
134
125
|
},
|
|
135
126
|
'&[disabled]': {
|
|
136
127
|
// Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
*/
|
|
2
5
|
/** @jsx jsx */
|
|
3
6
|
import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
|
|
7
|
+
|
|
8
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
4
9
|
import { jsx } from '@emotion/react';
|
|
5
10
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
6
11
|
import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
|
|
7
12
|
const analyticsParams = {
|
|
8
13
|
componentName: 'textField',
|
|
9
14
|
packageName: "@atlaskit/textfield",
|
|
10
|
-
packageVersion: "6.
|
|
15
|
+
packageVersion: "6.4.0"
|
|
11
16
|
};
|
|
12
17
|
const TextfieldComponent = /*#__PURE__*/forwardRef((props, ref) => {
|
|
13
18
|
const {
|
|
@@ -90,7 +95,9 @@ const TextfieldComponent = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
90
95
|
// TODO: When removing legacy theming fix this.
|
|
91
96
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
92
97
|
,
|
|
93
|
-
css: containerStyles
|
|
98
|
+
css: containerStyles
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
100
|
+
,
|
|
94
101
|
className: className
|
|
95
102
|
}, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
|
|
96
103
|
"aria-invalid": isInvalid ? isInvalid : undefined
|
package/dist/esm/styles.js
CHANGED
|
@@ -2,11 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
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; }
|
|
3
3
|
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; }
|
|
4
4
|
import { B200, N0, N10, N100, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
|
|
5
|
-
import { codeFontFamily, fontFamily, fontSize as getFontSize,
|
|
6
|
-
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
7
|
-
gridSize as getGridSize } from '@atlaskit/theme/constants';
|
|
8
|
-
var fontSize = getFontSize();
|
|
9
|
-
var gridSize = getGridSize();
|
|
10
5
|
var backgroundColor = {
|
|
11
6
|
standard: "var(--ds-background-input, ".concat(N10, ")"),
|
|
12
7
|
subtle: 'transparent',
|
|
@@ -104,7 +99,7 @@ export var containerStyles = function containerStyles(appearance, width) {
|
|
|
104
99
|
boxSizing: 'border-box',
|
|
105
100
|
display: 'flex',
|
|
106
101
|
flex: '1 1 100%',
|
|
107
|
-
|
|
102
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
108
103
|
justifyContent: 'space-between',
|
|
109
104
|
maxWidth: getMaxWidth(width),
|
|
110
105
|
overflow: 'hidden',
|
|
@@ -121,22 +116,18 @@ export var inputStyles = function inputStyles() {
|
|
|
121
116
|
boxSizing: 'border-box',
|
|
122
117
|
color: 'inherit',
|
|
123
118
|
cursor: 'inherit',
|
|
124
|
-
|
|
119
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
125
120
|
minWidth: '0',
|
|
126
121
|
outline: 'none',
|
|
127
122
|
width: '100%',
|
|
128
|
-
lineHeight: gridSize * 2.5 / fontSize,
|
|
129
|
-
fontFamily: fontFamily(),
|
|
130
123
|
'&[data-monospaced]': {
|
|
131
|
-
fontFamily:
|
|
124
|
+
fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
|
|
132
125
|
},
|
|
133
126
|
'&[data-compact]': {
|
|
134
|
-
padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
|
|
135
|
-
height: "".concat((gridSize * 3.5 / fontSize).toFixed(2), "em")
|
|
127
|
+
padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
|
|
136
128
|
},
|
|
137
129
|
'&:not([data-compact])': {
|
|
138
|
-
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
|
|
139
|
-
height: "".concat((gridSize * 4.5 / fontSize).toFixed(2), "em")
|
|
130
|
+
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
|
|
140
131
|
},
|
|
141
132
|
'&[disabled]': {
|
|
142
133
|
// Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
|
package/dist/esm/text-field.js
CHANGED
|
@@ -5,15 +5,20 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
5
5
|
var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
|
|
6
6
|
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; }
|
|
7
7
|
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; }
|
|
8
|
+
/**
|
|
9
|
+
* @jsxRuntime classic
|
|
10
|
+
*/
|
|
8
11
|
/** @jsx jsx */
|
|
9
12
|
import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
|
|
13
|
+
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
15
|
import { jsx } from '@emotion/react';
|
|
11
16
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
12
17
|
import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
|
|
13
18
|
var analyticsParams = {
|
|
14
19
|
componentName: 'textField',
|
|
15
20
|
packageName: "@atlaskit/textfield",
|
|
16
|
-
packageVersion: "6.
|
|
21
|
+
packageVersion: "6.4.0"
|
|
17
22
|
};
|
|
18
23
|
var TextfieldComponent = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
19
24
|
var _props$appearance = props.appearance,
|
|
@@ -101,7 +106,9 @@ var TextfieldComponent = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
101
106
|
// TODO: When removing legacy theming fix this.
|
|
102
107
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
103
108
|
,
|
|
104
|
-
css: containerStyles
|
|
109
|
+
css: containerStyles
|
|
110
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
111
|
+
,
|
|
105
112
|
className: className
|
|
106
113
|
}, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
|
|
107
114
|
"aria-invalid": isInvalid ? isInvalid : undefined
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Appearance } from './types';
|
|
1
|
+
import { type Appearance } from './types';
|
|
2
2
|
export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
|
|
3
3
|
readonly borderStyle: "none" | "solid";
|
|
4
4
|
readonly boxSizing: "border-box";
|
|
5
5
|
readonly display: "flex";
|
|
6
6
|
readonly flex: "1 1 100%";
|
|
7
|
-
readonly
|
|
7
|
+
readonly font: "var(--ds-font-body)";
|
|
8
8
|
readonly justifyContent: "space-between";
|
|
9
9
|
readonly maxWidth: string | number;
|
|
10
10
|
readonly overflow: "hidden";
|
|
@@ -62,22 +62,18 @@ export declare const inputStyles: () => {
|
|
|
62
62
|
readonly boxSizing: "border-box";
|
|
63
63
|
readonly color: "inherit";
|
|
64
64
|
readonly cursor: "inherit";
|
|
65
|
-
readonly
|
|
65
|
+
readonly font: "var(--ds-font-body)";
|
|
66
66
|
readonly minWidth: "0";
|
|
67
67
|
readonly outline: "none";
|
|
68
68
|
readonly width: "100%";
|
|
69
|
-
readonly lineHeight: number;
|
|
70
|
-
readonly fontFamily: string;
|
|
71
69
|
readonly '&[data-monospaced]': {
|
|
72
|
-
readonly fontFamily:
|
|
70
|
+
readonly fontFamily: "var(--ds-font-family-monospace)";
|
|
73
71
|
};
|
|
74
72
|
readonly '&[data-compact]': {
|
|
75
73
|
readonly padding: "var(--ds-space-050) var(--ds-space-075)";
|
|
76
|
-
readonly height: `${string}em`;
|
|
77
74
|
};
|
|
78
75
|
readonly '&:not([data-compact])': {
|
|
79
76
|
readonly padding: "var(--ds-space-100) var(--ds-space-075)";
|
|
80
|
-
readonly height: `${string}em`;
|
|
81
77
|
};
|
|
82
78
|
readonly '&[disabled]': {
|
|
83
79
|
readonly WebkitTextFillColor: "var(--ds-text-disabled)";
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type AllHTMLAttributes, type FormEventHandler, type default as React } from 'react';
|
|
2
2
|
export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
|
|
3
3
|
/**
|
|
4
4
|
* Controls the appearance of the field.
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Appearance } from './types';
|
|
1
|
+
import { type Appearance } from './types';
|
|
2
2
|
export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
|
|
3
3
|
readonly borderStyle: "none" | "solid";
|
|
4
4
|
readonly boxSizing: "border-box";
|
|
5
5
|
readonly display: "flex";
|
|
6
6
|
readonly flex: "1 1 100%";
|
|
7
|
-
readonly
|
|
7
|
+
readonly font: "var(--ds-font-body)";
|
|
8
8
|
readonly justifyContent: "space-between";
|
|
9
9
|
readonly maxWidth: string | number;
|
|
10
10
|
readonly overflow: "hidden";
|
|
@@ -62,22 +62,18 @@ export declare const inputStyles: () => {
|
|
|
62
62
|
readonly boxSizing: "border-box";
|
|
63
63
|
readonly color: "inherit";
|
|
64
64
|
readonly cursor: "inherit";
|
|
65
|
-
readonly
|
|
65
|
+
readonly font: "var(--ds-font-body)";
|
|
66
66
|
readonly minWidth: "0";
|
|
67
67
|
readonly outline: "none";
|
|
68
68
|
readonly width: "100%";
|
|
69
|
-
readonly lineHeight: number;
|
|
70
|
-
readonly fontFamily: string;
|
|
71
69
|
readonly '&[data-monospaced]': {
|
|
72
|
-
readonly fontFamily:
|
|
70
|
+
readonly fontFamily: "var(--ds-font-family-monospace)";
|
|
73
71
|
};
|
|
74
72
|
readonly '&[data-compact]': {
|
|
75
73
|
readonly padding: "var(--ds-space-050) var(--ds-space-075)";
|
|
76
|
-
readonly height: `${string}em`;
|
|
77
74
|
};
|
|
78
75
|
readonly '&:not([data-compact])': {
|
|
79
76
|
readonly padding: "var(--ds-space-100) var(--ds-space-075)";
|
|
80
|
-
readonly height: `${string}em`;
|
|
81
77
|
};
|
|
82
78
|
readonly '&[disabled]': {
|
|
83
79
|
readonly WebkitTextFillColor: "var(--ds-text-disabled)";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type AllHTMLAttributes, type FormEventHandler, type default as React } from 'react';
|
|
2
2
|
export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
|
|
3
3
|
/**
|
|
4
4
|
* Controls the appearance of the field.
|
package/package.json
CHANGED
|
@@ -1,95 +1,93 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
95
|
-
}
|
|
2
|
+
"name": "@atlaskit/textfield",
|
|
3
|
+
"version": "6.4.0",
|
|
4
|
+
"description": "A text field is an input that allows a user to write or edit text.",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"registry": "https://registry.npmjs.org/"
|
|
7
|
+
},
|
|
8
|
+
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
9
|
+
"author": "Atlassian Pty Ltd",
|
|
10
|
+
"license": "Apache-2.0",
|
|
11
|
+
"main": "dist/cjs/index.js",
|
|
12
|
+
"module": "dist/esm/index.js",
|
|
13
|
+
"module:es2019": "dist/es2019/index.js",
|
|
14
|
+
"types": "dist/types/index.d.ts",
|
|
15
|
+
"sideEffects": false,
|
|
16
|
+
"atlaskit:src": "src/index.tsx",
|
|
17
|
+
"atlassian": {
|
|
18
|
+
"team": "Design System Team",
|
|
19
|
+
"runReact18": true,
|
|
20
|
+
"productPushConsumption": [
|
|
21
|
+
"jira"
|
|
22
|
+
],
|
|
23
|
+
"releaseModel": "continuous",
|
|
24
|
+
"website": {
|
|
25
|
+
"name": "Text field",
|
|
26
|
+
"category": "Components"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"@atlaskit/analytics-next": "^9.3.0",
|
|
31
|
+
"@atlaskit/theme": "^12.10.0",
|
|
32
|
+
"@atlaskit/tokens": "^1.51.0",
|
|
33
|
+
"@babel/runtime": "^7.0.0",
|
|
34
|
+
"@emotion/react": "^11.7.1"
|
|
35
|
+
},
|
|
36
|
+
"peerDependencies": {
|
|
37
|
+
"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
|
|
38
|
+
},
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"@af/accessibility-testing": "*",
|
|
41
|
+
"@af/integration-testing": "*",
|
|
42
|
+
"@af/visual-regression": "*",
|
|
43
|
+
"@atlaskit/codemod-utils": "^4.2.3",
|
|
44
|
+
"@atlaskit/ds-lib": "^2.3.0",
|
|
45
|
+
"@atlaskit/ssr": "*",
|
|
46
|
+
"@atlaskit/visual-regression": "*",
|
|
47
|
+
"@atlassian/feature-flags-test-utils": "*",
|
|
48
|
+
"@testing-library/dom": "^8.17.1",
|
|
49
|
+
"@testing-library/react": "^12.1.5",
|
|
50
|
+
"jscodeshift": "^0.13.0",
|
|
51
|
+
"react-dom": "^16.8.0",
|
|
52
|
+
"storybook-addon-performance": "^0.16.0",
|
|
53
|
+
"typescript": "~5.4.2",
|
|
54
|
+
"wait-for-expect": "^1.2.0"
|
|
55
|
+
},
|
|
56
|
+
"keywords": [
|
|
57
|
+
"atlaskit",
|
|
58
|
+
"react",
|
|
59
|
+
"ui"
|
|
60
|
+
],
|
|
61
|
+
"techstack": {
|
|
62
|
+
"@atlassian/frontend": {
|
|
63
|
+
"import-structure": "atlassian-conventions"
|
|
64
|
+
},
|
|
65
|
+
"@repo/internal": {
|
|
66
|
+
"dom-events": "use-bind-event-listener",
|
|
67
|
+
"ui-components": "lite-mode",
|
|
68
|
+
"styling": [
|
|
69
|
+
"static",
|
|
70
|
+
"emotion"
|
|
71
|
+
],
|
|
72
|
+
"analytics": "analytics-next",
|
|
73
|
+
"design-tokens": [
|
|
74
|
+
"color",
|
|
75
|
+
"spacing"
|
|
76
|
+
],
|
|
77
|
+
"design-system": "v1",
|
|
78
|
+
"deprecation": "no-deprecated-imports"
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
"typesVersions": {
|
|
82
|
+
">=4.5 <4.9": {
|
|
83
|
+
"*": [
|
|
84
|
+
"dist/types-ts4.5/*",
|
|
85
|
+
"dist/types-ts4.5/index.d.ts"
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
"af:exports": {
|
|
90
|
+
".": "./src/index.tsx"
|
|
91
|
+
},
|
|
92
|
+
"homepage": "https://atlassian.design/components/textfield/"
|
|
93
|
+
}
|
package/report.api.md
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
## API Report File for "@atlaskit/textfield"
|
|
4
4
|
|
|
5
|
-
> Do not edit this file. This report is auto-generated using
|
|
5
|
+
> Do not edit this file. This report is auto-generated using
|
|
6
|
+
> [API Extractor](https://api-extractor.com/).
|
|
6
7
|
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
7
8
|
|
|
8
9
|
### Table of contents
|
|
@@ -23,30 +24,27 @@ import { default as React_2 } from 'react';
|
|
|
23
24
|
export type Appearance = 'none' | 'standard' | 'subtle';
|
|
24
25
|
|
|
25
26
|
// @public
|
|
26
|
-
const _default: React_2.NamedExoticComponent<
|
|
27
|
-
TextFieldProps & React_2.RefAttributes<unknown>
|
|
28
|
-
>;
|
|
27
|
+
const _default: React_2.NamedExoticComponent<TextFieldProps & React_2.RefAttributes<unknown>>;
|
|
29
28
|
export default _default;
|
|
30
29
|
|
|
31
30
|
// @public (undocumented)
|
|
32
|
-
export interface TextFieldProps
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
width?: number | string;
|
|
31
|
+
export interface TextFieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
|
|
32
|
+
appearance?: Appearance;
|
|
33
|
+
className?: string;
|
|
34
|
+
elemAfterInput?: React_2.ReactNode;
|
|
35
|
+
elemBeforeInput?: React_2.ReactNode;
|
|
36
|
+
isCompact?: boolean;
|
|
37
|
+
isDisabled?: boolean;
|
|
38
|
+
isInvalid?: boolean;
|
|
39
|
+
isMonospaced?: boolean;
|
|
40
|
+
isReadOnly?: boolean;
|
|
41
|
+
isRequired?: boolean;
|
|
42
|
+
name?: string;
|
|
43
|
+
onChange?: FormEventHandler<HTMLInputElement>;
|
|
44
|
+
onMouseDown?: React_2.MouseEventHandler<HTMLElement>;
|
|
45
|
+
placeholder?: string;
|
|
46
|
+
testId?: string;
|
|
47
|
+
width?: number | string;
|
|
50
48
|
}
|
|
51
49
|
|
|
52
50
|
// (No @packageDocumentation comment for this package)
|
|
@@ -60,7 +58,7 @@ export interface TextFieldProps
|
|
|
60
58
|
|
|
61
59
|
```json
|
|
62
60
|
{
|
|
63
|
-
|
|
61
|
+
"react": "^16.8.0"
|
|
64
62
|
}
|
|
65
63
|
```
|
|
66
64
|
|