@atlaskit/textarea 4.7.1 → 4.7.2
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 +6 -0
- package/dist/cjs/component-tokens.js +2 -2
- package/dist/cjs/styles.js +6 -6
- package/dist/cjs/text-area.js +2 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/component-tokens.js +2 -2
- package/dist/es2019/styles.js +6 -6
- package/dist/es2019/text-area.js +2 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/component-tokens.js +2 -2
- package/dist/esm/styles.js +6 -6
- package/dist/esm/text-area.js +2 -2
- package/dist/esm/version.json +1 -1
- package/package.json +4 -4
- package/tmp/api-report-tmp.d.ts +215 -0
- package/extract-react-types/textarea-props.tsx +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -22,8 +22,8 @@ var invalidBorderColor = {
|
|
|
22
22
|
};
|
|
23
23
|
exports.invalidBorderColor = invalidBorderColor;
|
|
24
24
|
var defaultBorderColor = {
|
|
25
|
-
light: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
26
|
-
dark: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
25
|
+
light: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
|
|
26
|
+
dark: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.DN200 : _colors.DN40, ")")
|
|
27
27
|
};
|
|
28
28
|
exports.defaultBorderColor = defaultBorderColor;
|
|
29
29
|
var defaultBorderColorFocus = {
|
package/dist/cjs/styles.js
CHANGED
|
@@ -44,7 +44,7 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
|
|
|
44
44
|
'&:focus': {
|
|
45
45
|
backgroundColor: props.backgroundColorFocus,
|
|
46
46
|
borderColor: props.borderColorFocus,
|
|
47
|
-
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
47
|
+
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.borderColorFocus) : undefined
|
|
48
48
|
},
|
|
49
49
|
'&:not(:focus)': {
|
|
50
50
|
backgroundColor: props.backgroundColor,
|
|
@@ -54,13 +54,13 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
|
|
|
54
54
|
'&[data-invalid]:focus': {
|
|
55
55
|
backgroundColor: props.invalidRules.backgroundColorFocus,
|
|
56
56
|
borderColor: props.invalidRules.borderColorFocus,
|
|
57
|
-
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
57
|
+
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColorFocus) : undefined
|
|
58
58
|
},
|
|
59
59
|
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
60
60
|
'&[data-invalid]:not(:focus)': {
|
|
61
61
|
backgroundColor: props.invalidRules.backgroundColor,
|
|
62
62
|
borderColor: props.invalidRules.borderColor,
|
|
63
|
-
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
63
|
+
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
|
|
64
64
|
}
|
|
65
65
|
}, appearance === 'standard' ? {
|
|
66
66
|
'&:disabled:focus': {
|
|
@@ -92,7 +92,7 @@ var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(pro
|
|
|
92
92
|
'&[data-invalid]': {
|
|
93
93
|
backgroundColor: props.invalidRules.backgroundColorHover,
|
|
94
94
|
borderColor: props.invalidRules.borderColor,
|
|
95
|
-
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
95
|
+
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
});
|
|
@@ -125,7 +125,7 @@ var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
|
|
|
125
125
|
var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
|
|
126
126
|
var minimumRows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
|
127
127
|
var appearance = arguments.length > 1 ? arguments[1] : undefined;
|
|
128
|
-
var borderWidth = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
128
|
+
var borderWidth = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? 1 : 2;
|
|
129
129
|
var horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
|
|
130
130
|
var borderHeight = borderWidth;
|
|
131
131
|
return (0, _react.css)({
|
|
@@ -154,7 +154,7 @@ var staticStyles = (0, _react.css)({
|
|
|
154
154
|
position: 'relative',
|
|
155
155
|
flex: '1 1 100%',
|
|
156
156
|
borderRadius: borderRadius,
|
|
157
|
-
borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
157
|
+
borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? 1 : borderWidth,
|
|
158
158
|
fontSize: fontSize,
|
|
159
159
|
outline: 'none',
|
|
160
160
|
overflow: 'auto',
|
package/dist/cjs/text-area.js
CHANGED
|
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
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; }
|
|
24
24
|
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; }
|
|
25
25
|
var packageName = "@atlaskit/textarea";
|
|
26
|
-
var packageVersion = "4.7.
|
|
26
|
+
var packageVersion = "4.7.2";
|
|
27
27
|
var analyticsParams = {
|
|
28
28
|
componentName: 'textArea',
|
|
29
29
|
packageName: packageName,
|
|
@@ -131,7 +131,7 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
|
|
|
131
131
|
rows: minimumRows
|
|
132
132
|
// TODO refactor to follow emotion styling rules
|
|
133
133
|
// see: https://product-fabric.atlassian.net/browse/DSP-6060
|
|
134
|
-
// eslint-disable-next-line @
|
|
134
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
135
135
|
,
|
|
136
136
|
css: textAreaStyles
|
|
137
137
|
}, rest));
|
package/dist/cjs/version.json
CHANGED
|
@@ -13,8 +13,8 @@ export const invalidBorderColor = {
|
|
|
13
13
|
dark: `var(--ds-border-danger, ${R400})`
|
|
14
14
|
};
|
|
15
15
|
export const defaultBorderColor = {
|
|
16
|
-
light: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.
|
|
17
|
-
dark: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.
|
|
16
|
+
light: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
|
|
17
|
+
dark: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40})`
|
|
18
18
|
};
|
|
19
19
|
export const defaultBorderColorFocus = {
|
|
20
20
|
light: `var(--ds-border-focused, ${B100})`,
|
package/dist/es2019/styles.js
CHANGED
|
@@ -35,7 +35,7 @@ const bgAndBorderColorStyles = (props, appearance) => css({
|
|
|
35
35
|
'&:focus': {
|
|
36
36
|
backgroundColor: props.backgroundColorFocus,
|
|
37
37
|
borderColor: props.borderColorFocus,
|
|
38
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
38
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${props.borderColorFocus}` : undefined
|
|
39
39
|
},
|
|
40
40
|
'&:not(:focus)': {
|
|
41
41
|
backgroundColor: props.backgroundColor,
|
|
@@ -45,13 +45,13 @@ const bgAndBorderColorStyles = (props, appearance) => css({
|
|
|
45
45
|
'&[data-invalid]:focus': {
|
|
46
46
|
backgroundColor: props.invalidRules.backgroundColorFocus,
|
|
47
47
|
borderColor: props.invalidRules.borderColorFocus,
|
|
48
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
48
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${props.invalidRules.borderColorFocus}` : undefined
|
|
49
49
|
},
|
|
50
50
|
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
51
51
|
'&[data-invalid]:not(:focus)': {
|
|
52
52
|
backgroundColor: props.invalidRules.backgroundColor,
|
|
53
53
|
borderColor: props.invalidRules.borderColor,
|
|
54
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
54
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${props.invalidRules.borderColor}` : undefined
|
|
55
55
|
},
|
|
56
56
|
// Disabled background and border styles should not be applied to components that
|
|
57
57
|
// have either no background or transparent background to begin with
|
|
@@ -82,7 +82,7 @@ const hoverBackgroundAndBorderStyles = props => css({
|
|
|
82
82
|
'&[data-invalid]': {
|
|
83
83
|
backgroundColor: props.invalidRules.backgroundColorHover,
|
|
84
84
|
borderColor: props.invalidRules.borderColor,
|
|
85
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
85
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${props.invalidRules.borderColor}` : undefined
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
});
|
|
@@ -108,7 +108,7 @@ const fontFamilyStyle = isMonospaced => css({
|
|
|
108
108
|
fontFamily: isMonospaced ? codeFontFamily : fontFamily
|
|
109
109
|
});
|
|
110
110
|
const borderPaddingAndHeightStyles = (minimumRows = 1, appearance) => {
|
|
111
|
-
const borderWidth = getBooleanFF('platform.design-system-team.
|
|
111
|
+
const borderWidth = getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? 1 : 2;
|
|
112
112
|
const horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
|
|
113
113
|
const borderHeight = borderWidth;
|
|
114
114
|
return css({
|
|
@@ -137,7 +137,7 @@ const staticStyles = css({
|
|
|
137
137
|
position: 'relative',
|
|
138
138
|
flex: '1 1 100%',
|
|
139
139
|
borderRadius: borderRadius,
|
|
140
|
-
borderWidth: getBooleanFF('platform.design-system-team.
|
|
140
|
+
borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : borderWidth,
|
|
141
141
|
fontSize: fontSize,
|
|
142
142
|
outline: 'none',
|
|
143
143
|
overflow: 'auto',
|
package/dist/es2019/text-area.js
CHANGED
|
@@ -7,7 +7,7 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
|
|
|
7
7
|
import { borderWidth, getBaseStyles, themeStyles } from './styles';
|
|
8
8
|
import { Theme } from './theme';
|
|
9
9
|
const packageName = "@atlaskit/textarea";
|
|
10
|
-
const packageVersion = "4.7.
|
|
10
|
+
const packageVersion = "4.7.2";
|
|
11
11
|
const analyticsParams = {
|
|
12
12
|
componentName: 'textArea',
|
|
13
13
|
packageName,
|
|
@@ -107,7 +107,7 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
107
107
|
rows: minimumRows
|
|
108
108
|
// TODO refactor to follow emotion styling rules
|
|
109
109
|
// see: https://product-fabric.atlassian.net/browse/DSP-6060
|
|
110
|
-
// eslint-disable-next-line @
|
|
110
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
111
111
|
,
|
|
112
112
|
css: textAreaStyles
|
|
113
113
|
}, rest));
|
package/dist/es2019/version.json
CHANGED
|
@@ -13,8 +13,8 @@ export var invalidBorderColor = {
|
|
|
13
13
|
dark: "var(--ds-border-danger, ".concat(R400, ")")
|
|
14
14
|
};
|
|
15
15
|
export var defaultBorderColor = {
|
|
16
|
-
light: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.
|
|
17
|
-
dark: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.
|
|
16
|
+
light: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
|
|
17
|
+
dark: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40, ")")
|
|
18
18
|
};
|
|
19
19
|
export var defaultBorderColorFocus = {
|
|
20
20
|
light: "var(--ds-border-focused, ".concat(B100, ")"),
|
package/dist/esm/styles.js
CHANGED
|
@@ -39,7 +39,7 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
|
|
|
39
39
|
'&:focus': {
|
|
40
40
|
backgroundColor: props.backgroundColorFocus,
|
|
41
41
|
borderColor: props.borderColorFocus,
|
|
42
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
42
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.borderColorFocus) : undefined
|
|
43
43
|
},
|
|
44
44
|
'&:not(:focus)': {
|
|
45
45
|
backgroundColor: props.backgroundColor,
|
|
@@ -49,13 +49,13 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
|
|
|
49
49
|
'&[data-invalid]:focus': {
|
|
50
50
|
backgroundColor: props.invalidRules.backgroundColorFocus,
|
|
51
51
|
borderColor: props.invalidRules.borderColorFocus,
|
|
52
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
52
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColorFocus) : undefined
|
|
53
53
|
},
|
|
54
54
|
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
55
55
|
'&[data-invalid]:not(:focus)': {
|
|
56
56
|
backgroundColor: props.invalidRules.backgroundColor,
|
|
57
57
|
borderColor: props.invalidRules.borderColor,
|
|
58
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
58
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
|
|
59
59
|
}
|
|
60
60
|
}, appearance === 'standard' ? {
|
|
61
61
|
'&:disabled:focus': {
|
|
@@ -87,7 +87,7 @@ var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(pro
|
|
|
87
87
|
'&[data-invalid]': {
|
|
88
88
|
backgroundColor: props.invalidRules.backgroundColorHover,
|
|
89
89
|
borderColor: props.invalidRules.borderColor,
|
|
90
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
90
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
});
|
|
@@ -120,7 +120,7 @@ var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
|
|
|
120
120
|
var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
|
|
121
121
|
var minimumRows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
|
122
122
|
var appearance = arguments.length > 1 ? arguments[1] : undefined;
|
|
123
|
-
var borderWidth = getBooleanFF('platform.design-system-team.
|
|
123
|
+
var borderWidth = getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? 1 : 2;
|
|
124
124
|
var horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
|
|
125
125
|
var borderHeight = borderWidth;
|
|
126
126
|
return css({
|
|
@@ -149,7 +149,7 @@ var staticStyles = css({
|
|
|
149
149
|
position: 'relative',
|
|
150
150
|
flex: '1 1 100%',
|
|
151
151
|
borderRadius: borderRadius,
|
|
152
|
-
borderWidth: getBooleanFF('platform.design-system-team.
|
|
152
|
+
borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : borderWidth,
|
|
153
153
|
fontSize: fontSize,
|
|
154
154
|
outline: 'none',
|
|
155
155
|
overflow: 'auto',
|
package/dist/esm/text-area.js
CHANGED
|
@@ -13,7 +13,7 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
|
|
|
13
13
|
import { borderWidth, getBaseStyles, themeStyles } from './styles';
|
|
14
14
|
import { Theme } from './theme';
|
|
15
15
|
var packageName = "@atlaskit/textarea";
|
|
16
|
-
var packageVersion = "4.7.
|
|
16
|
+
var packageVersion = "4.7.2";
|
|
17
17
|
var analyticsParams = {
|
|
18
18
|
componentName: 'textArea',
|
|
19
19
|
packageName: packageName,
|
|
@@ -121,7 +121,7 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
121
121
|
rows: minimumRows
|
|
122
122
|
// TODO refactor to follow emotion styling rules
|
|
123
123
|
// see: https://product-fabric.atlassian.net/browse/DSP-6060
|
|
124
|
-
// eslint-disable-next-line @
|
|
124
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
125
125
|
,
|
|
126
126
|
css: textAreaStyles
|
|
127
127
|
}, rest));
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/textarea",
|
|
3
|
-
"version": "4.7.
|
|
3
|
+
"version": "4.7.2",
|
|
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/"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"homepage": "https://atlassian.design/components/textarea/",
|
|
26
26
|
"atlassian": {
|
|
27
27
|
"team": "Design System Team",
|
|
28
|
-
"releaseModel": "
|
|
28
|
+
"releaseModel": "continuous",
|
|
29
29
|
"website": {
|
|
30
30
|
"name": "Text area",
|
|
31
31
|
"category": "Components"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@atlaskit/analytics-next": "^9.1.0",
|
|
43
43
|
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
44
44
|
"@atlaskit/theme": "^12.5.0",
|
|
45
|
-
"@atlaskit/tokens": "^1.
|
|
45
|
+
"@atlaskit/tokens": "^1.8.0",
|
|
46
46
|
"@babel/runtime": "^7.0.0",
|
|
47
47
|
"@emotion/react": "^11.7.1"
|
|
48
48
|
},
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
}
|
|
95
95
|
},
|
|
96
96
|
"platform-feature-flags": {
|
|
97
|
-
"platform.design-system-team.
|
|
97
|
+
"platform.design-system-team.border-checkbox_nyoiu": {
|
|
98
98
|
"type": "boolean"
|
|
99
99
|
}
|
|
100
100
|
},
|
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
## API Report File for "@atlaskit/textarea"
|
|
2
|
+
|
|
3
|
+
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
|
+
|
|
5
|
+
```ts
|
|
6
|
+
|
|
7
|
+
/// <reference types="react" />
|
|
8
|
+
|
|
9
|
+
import { ComponentType } from 'react';
|
|
10
|
+
import { default as React_2 } from 'react';
|
|
11
|
+
import { ReactNode } from 'react';
|
|
12
|
+
import { ThemeProp } from '@atlaskit/theme/components';
|
|
13
|
+
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
14
|
+
|
|
15
|
+
// @public (undocumented)
|
|
16
|
+
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
17
|
+
|
|
18
|
+
// @public (undocumented)
|
|
19
|
+
interface OwnProps extends WithAnalyticsEventsProps {
|
|
20
|
+
appearance?: 'none' | 'standard' | 'subtle';
|
|
21
|
+
defaultValue?: string;
|
|
22
|
+
isCompact?: boolean;
|
|
23
|
+
isDisabled?: boolean;
|
|
24
|
+
isInvalid?: boolean;
|
|
25
|
+
isMonospaced?: boolean;
|
|
26
|
+
isReadOnly?: boolean;
|
|
27
|
+
isRequired?: boolean;
|
|
28
|
+
maxHeight?: string;
|
|
29
|
+
minimumRows?: number;
|
|
30
|
+
name?: string;
|
|
31
|
+
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
32
|
+
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
|
|
33
|
+
onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
34
|
+
placeholder?: string;
|
|
35
|
+
resize?: 'auto' | 'horizontal' | 'none' | 'smart' | 'vertical';
|
|
36
|
+
spellCheck?: boolean;
|
|
37
|
+
testId?: string;
|
|
38
|
+
theme?: any;
|
|
39
|
+
value?: string;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// @public
|
|
43
|
+
const TextArea: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<Pick<TextAreaProps, "about" | "accessKey" | "appearance" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "cols" | "contentEditable" | "contextMenu" | "createAnalyticsEvent" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "dirName" | "draggable" | "form" | "hidden" | "id" | "inlist" | "inputMode" | "is" | "isCompact" | "isDisabled" | "isInvalid" | "isMonospaced" | "isReadOnly" | "isRequired" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "lang" | "maxHeight" | "maxLength" | "minLength" | "minimumRows" | "name" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "placeholder" | "prefix" | "property" | "radioGroup" | "readOnly" | "resize" | "resource" | "results" | "role" | "rows" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "testId" | "theme" | "title" | "typeof" | "unselectable" | "value" | "vocab" | "wrap"> & React_2.RefAttributes<HTMLTextAreaElement>>>;
|
|
44
|
+
export default TextArea;
|
|
45
|
+
|
|
46
|
+
// @public (undocumented)
|
|
47
|
+
export type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'readonly' | 'required'>, OwnProps>;
|
|
48
|
+
|
|
49
|
+
// @public @deprecated (undocumented)
|
|
50
|
+
export const Theme: {
|
|
51
|
+
Consumer: ComponentType< {
|
|
52
|
+
children: (tokens: ThemeTokens) => ReactNode;
|
|
53
|
+
} & ThemeProps>;
|
|
54
|
+
Provider: ComponentType< {
|
|
55
|
+
children?: ReactNode;
|
|
56
|
+
value?: ThemeProp<ThemeTokens, ThemeProps> | undefined;
|
|
57
|
+
}>;
|
|
58
|
+
useTheme: (props: ThemeProps) => ThemeTokens;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
// @public (undocumented)
|
|
62
|
+
export type ThemeAppearance = 'none' | 'standard' | 'subtle';
|
|
63
|
+
|
|
64
|
+
// @public (undocumented)
|
|
65
|
+
export type ThemeProps = {
|
|
66
|
+
appearance: ThemeAppearance;
|
|
67
|
+
mode: 'dark' | 'light';
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
// @public @deprecated (undocumented)
|
|
71
|
+
export type ThemeTokens = {
|
|
72
|
+
borderColor: string;
|
|
73
|
+
borderColorFocus: string;
|
|
74
|
+
borderColorHover: string;
|
|
75
|
+
backgroundColor: string;
|
|
76
|
+
backgroundColorFocus: string;
|
|
77
|
+
backgroundColorHover: string;
|
|
78
|
+
disabledRules: {
|
|
79
|
+
backgroundColor: string;
|
|
80
|
+
backgroundColorFocus: string;
|
|
81
|
+
backgroundColorHover: string;
|
|
82
|
+
borderColor: string;
|
|
83
|
+
borderColorFocus: string;
|
|
84
|
+
textColor: string;
|
|
85
|
+
};
|
|
86
|
+
invalidRules: {
|
|
87
|
+
borderColor: string;
|
|
88
|
+
borderColorFocus: string;
|
|
89
|
+
backgroundColor: string;
|
|
90
|
+
backgroundColorFocus: string;
|
|
91
|
+
backgroundColorHover: string;
|
|
92
|
+
};
|
|
93
|
+
textColor: string;
|
|
94
|
+
placeholderTextColor: string;
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
// @public @deprecated (undocumented)
|
|
98
|
+
export const themeTokens: {
|
|
99
|
+
borderColor: {
|
|
100
|
+
standard: {
|
|
101
|
+
light: "var(--ds-border-input)";
|
|
102
|
+
dark: "var(--ds-border-input)";
|
|
103
|
+
};
|
|
104
|
+
subtle: {
|
|
105
|
+
light: string;
|
|
106
|
+
dark: string;
|
|
107
|
+
};
|
|
108
|
+
none: {
|
|
109
|
+
light: string;
|
|
110
|
+
dark: string;
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
borderColorFocus: {
|
|
114
|
+
standard: {
|
|
115
|
+
light: "var(--ds-border-focused)";
|
|
116
|
+
dark: "var(--ds-border-focused)";
|
|
117
|
+
};
|
|
118
|
+
subtle: {
|
|
119
|
+
light: "var(--ds-border-focused)";
|
|
120
|
+
dark: "var(--ds-border-focused)";
|
|
121
|
+
};
|
|
122
|
+
none: {
|
|
123
|
+
light: string;
|
|
124
|
+
dark: string;
|
|
125
|
+
};
|
|
126
|
+
};
|
|
127
|
+
backgroundColor: {
|
|
128
|
+
standard: {
|
|
129
|
+
light: "var(--ds-background-input)";
|
|
130
|
+
dark: "var(--ds-background-input)";
|
|
131
|
+
};
|
|
132
|
+
subtle: {
|
|
133
|
+
light: string;
|
|
134
|
+
dark: string;
|
|
135
|
+
};
|
|
136
|
+
none: {
|
|
137
|
+
light: string;
|
|
138
|
+
dark: string;
|
|
139
|
+
};
|
|
140
|
+
};
|
|
141
|
+
backgroundColorFocus: {
|
|
142
|
+
standard: {
|
|
143
|
+
light: "var(--ds-background-input-pressed)";
|
|
144
|
+
dark: "var(--ds-background-input-pressed)";
|
|
145
|
+
};
|
|
146
|
+
subtle: {
|
|
147
|
+
light: "var(--ds-background-input-pressed)";
|
|
148
|
+
dark: "var(--ds-background-input-pressed)";
|
|
149
|
+
};
|
|
150
|
+
none: {
|
|
151
|
+
light: string;
|
|
152
|
+
dark: string;
|
|
153
|
+
};
|
|
154
|
+
};
|
|
155
|
+
backgroundColorHover: {
|
|
156
|
+
standard: {
|
|
157
|
+
light: "var(--ds-background-input-hovered)";
|
|
158
|
+
dark: "var(--ds-background-input-hovered)";
|
|
159
|
+
};
|
|
160
|
+
subtle: {
|
|
161
|
+
light: "var(--ds-background-input-hovered)";
|
|
162
|
+
dark: "var(--ds-background-input-hovered)";
|
|
163
|
+
};
|
|
164
|
+
none: {
|
|
165
|
+
light: string;
|
|
166
|
+
dark: string;
|
|
167
|
+
};
|
|
168
|
+
};
|
|
169
|
+
disabledRules: {
|
|
170
|
+
light: {
|
|
171
|
+
backgroundColor: "var(--ds-background-disabled)";
|
|
172
|
+
backgroundColorFocus: "var(--ds-background-disabled)";
|
|
173
|
+
backgroundColorHover: "var(--ds-background-disabled)";
|
|
174
|
+
borderColor: "var(--ds-border-disabled)";
|
|
175
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
176
|
+
textColor: "var(--ds-text-disabled)";
|
|
177
|
+
};
|
|
178
|
+
dark: {
|
|
179
|
+
backgroundColor: "var(--ds-background-disabled)";
|
|
180
|
+
backgroundColorFocus: "var(--ds-background-disabled)";
|
|
181
|
+
backgroundColorHover: "var(--ds-background-disabled)";
|
|
182
|
+
borderColor: "var(--ds-border-disabled)";
|
|
183
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
184
|
+
textColor: "var(--ds-text-disabled)";
|
|
185
|
+
};
|
|
186
|
+
};
|
|
187
|
+
invalidRules: {
|
|
188
|
+
light: {
|
|
189
|
+
borderColor: "var(--ds-border-danger)";
|
|
190
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
191
|
+
backgroundColor: "var(--ds-background-input)";
|
|
192
|
+
backgroundColorFocus: "var(--ds-background-input-pressed)";
|
|
193
|
+
backgroundColorHover: "var(--ds-background-input-hovered)";
|
|
194
|
+
};
|
|
195
|
+
dark: {
|
|
196
|
+
borderColor: "var(--ds-border-danger)";
|
|
197
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
198
|
+
backgroundColor: "var(--ds-background-input)";
|
|
199
|
+
backgroundColorFocus: "var(--ds-background-input-pressed)";
|
|
200
|
+
backgroundColorHover: "var(--ds-background-input-hovered)";
|
|
201
|
+
};
|
|
202
|
+
};
|
|
203
|
+
textColor: {
|
|
204
|
+
light: "var(--ds-text)";
|
|
205
|
+
dark: "var(--ds-text)";
|
|
206
|
+
};
|
|
207
|
+
placeholderTextColor: {
|
|
208
|
+
light: "var(--ds-text-subtlest)";
|
|
209
|
+
dark: "var(--ds-text-subtlest)";
|
|
210
|
+
};
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
// (No @packageDocumentation comment for this package)
|
|
214
|
+
|
|
215
|
+
```
|