@spark-web/text-input 5.3.0 → 5.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
CHANGED
|
@@ -1,5 +1,43 @@
|
|
|
1
1
|
# @spark-web/text-input
|
|
2
2
|
|
|
3
|
+
## 5.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#723](https://github.com/brighte-labs/spark-web/pull/723)
|
|
8
|
+
[`7290110`](https://github.com/brighte-labs/spark-web/commit/72901104c893f960cdf0974b71561490c93e43e4)
|
|
9
|
+
Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - expose
|
|
10
|
+
onInput event handler in text-input component
|
|
11
|
+
|
|
12
|
+
## 5.3.2
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#698](https://github.com/brighte-labs/spark-web/pull/698)
|
|
17
|
+
[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
|
|
18
|
+
Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
|
|
19
|
+
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
[[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
|
|
22
|
+
- @spark-web/box@5.2.2
|
|
23
|
+
- @spark-web/field@5.1.3
|
|
24
|
+
- @spark-web/text@5.2.3
|
|
25
|
+
- @spark-web/theme@5.12.1
|
|
26
|
+
|
|
27
|
+
## 5.3.1
|
|
28
|
+
|
|
29
|
+
### Patch Changes
|
|
30
|
+
|
|
31
|
+
- [#693](https://github.com/brighte-labs/spark-web/pull/693)
|
|
32
|
+
[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)
|
|
33
|
+
Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Add Bravo theme
|
|
34
|
+
|
|
35
|
+
- Updated dependencies
|
|
36
|
+
[[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
|
|
37
|
+
- @spark-web/theme@5.12.0
|
|
38
|
+
- @spark-web/field@5.1.2
|
|
39
|
+
- @spark-web/text@5.2.2
|
|
40
|
+
|
|
3
41
|
## 5.3.0
|
|
4
42
|
|
|
5
43
|
### Minor Changes
|
|
@@ -5,7 +5,7 @@ import type { InputHTMLAttributes } from 'react';
|
|
|
5
5
|
import type { AdornmentsAsChildren } from "./children-to-adornments.js";
|
|
6
6
|
declare type ValidTypes = 'text' | 'password' | 'email' | 'search' | 'number' | 'tel' | 'url';
|
|
7
7
|
declare type ValidModes = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
|
|
8
|
-
declare type NativeInputProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'value' | 'required' | 'autoComplete'>;
|
|
8
|
+
declare type NativeInputProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'placeholder' | 'value' | 'required' | 'autoComplete'>;
|
|
9
9
|
export declare type TextInputProps = {
|
|
10
10
|
/** Sets data attributes for the element. */
|
|
11
11
|
data?: DataAttributeMap;
|
|
@@ -127,6 +127,7 @@ var InputContainer = function InputContainer(_ref) {
|
|
|
127
127
|
}));
|
|
128
128
|
};
|
|
129
129
|
var FocusIndicator = function FocusIndicator(_ref2) {
|
|
130
|
+
var _theme$components$tex, _theme$components$tex2, _theme$components$tex3;
|
|
130
131
|
var invalid = _ref2.invalid;
|
|
131
132
|
var theme$1 = theme.useTheme();
|
|
132
133
|
return jsxRuntime.jsx(box.Box, {
|
|
@@ -137,14 +138,14 @@ var FocusIndicator = function FocusIndicator(_ref2) {
|
|
|
137
138
|
}
|
|
138
139
|
// Styles
|
|
139
140
|
,
|
|
140
|
-
border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
|
|
141
|
-
borderRadius: theme$1.components.textInput.borderRadius,
|
|
141
|
+
border: invalid ? 'critical' : (_theme$components$tex = theme$1.components.textInput) === null || _theme$components$tex === void 0 ? void 0 : _theme$components$tex.borderColor,
|
|
142
|
+
borderRadius: (_theme$components$tex2 = theme$1.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.borderRadius,
|
|
142
143
|
position: "absolute",
|
|
143
144
|
bottom: 0,
|
|
144
145
|
left: 0,
|
|
145
146
|
right: 0,
|
|
146
147
|
top: 0,
|
|
147
|
-
shadow: theme$1.components.textInput.boxShadow,
|
|
148
|
+
shadow: (_theme$components$tex3 = theme$1.components.textInput) === null || _theme$components$tex3 === void 0 ? void 0 : _theme$components$tex3.boxShadow,
|
|
148
149
|
css: react$1.css({
|
|
149
150
|
pointerEvents: 'none'
|
|
150
151
|
})
|
|
@@ -232,7 +233,7 @@ TextInput.displayName = 'TextInput';
|
|
|
232
233
|
* item is a CSS object to be passed to Emotion's `css` function
|
|
233
234
|
**/
|
|
234
235
|
var useInputStyles = function useInputStyles(_ref2) {
|
|
235
|
-
var _theme$components$tex;
|
|
236
|
+
var _theme$components$tex, _theme$components$tex2;
|
|
236
237
|
var disabled = _ref2.disabled,
|
|
237
238
|
startAdornment = _ref2.startAdornment,
|
|
238
239
|
endAdornment = _ref2.endAdornment,
|
|
@@ -262,7 +263,7 @@ var useInputStyles = function useInputStyles(_ref2) {
|
|
|
262
263
|
width: 'full'
|
|
263
264
|
}, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
|
|
264
265
|
':enabled': {
|
|
265
|
-
':focus + [data-focus-indicator]': (_theme$components$tex = theme$1.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
|
|
266
|
+
':focus + [data-focus-indicator]': (_theme$components$tex = (_theme$components$tex2 = theme$1.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
|
|
266
267
|
borderColor: theme$1.border.color.fieldAccent
|
|
267
268
|
}, focusRingStyles)
|
|
268
269
|
},
|
|
@@ -127,6 +127,7 @@ var InputContainer = function InputContainer(_ref) {
|
|
|
127
127
|
}));
|
|
128
128
|
};
|
|
129
129
|
var FocusIndicator = function FocusIndicator(_ref2) {
|
|
130
|
+
var _theme$components$tex, _theme$components$tex2, _theme$components$tex3;
|
|
130
131
|
var invalid = _ref2.invalid;
|
|
131
132
|
var theme$1 = theme.useTheme();
|
|
132
133
|
return jsxRuntime.jsx(box.Box, {
|
|
@@ -137,14 +138,14 @@ var FocusIndicator = function FocusIndicator(_ref2) {
|
|
|
137
138
|
}
|
|
138
139
|
// Styles
|
|
139
140
|
,
|
|
140
|
-
border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
|
|
141
|
-
borderRadius: theme$1.components.textInput.borderRadius,
|
|
141
|
+
border: invalid ? 'critical' : (_theme$components$tex = theme$1.components.textInput) === null || _theme$components$tex === void 0 ? void 0 : _theme$components$tex.borderColor,
|
|
142
|
+
borderRadius: (_theme$components$tex2 = theme$1.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.borderRadius,
|
|
142
143
|
position: "absolute",
|
|
143
144
|
bottom: 0,
|
|
144
145
|
left: 0,
|
|
145
146
|
right: 0,
|
|
146
147
|
top: 0,
|
|
147
|
-
shadow: theme$1.components.textInput.boxShadow,
|
|
148
|
+
shadow: (_theme$components$tex3 = theme$1.components.textInput) === null || _theme$components$tex3 === void 0 ? void 0 : _theme$components$tex3.boxShadow,
|
|
148
149
|
css: react$1.css({
|
|
149
150
|
pointerEvents: 'none'
|
|
150
151
|
})
|
|
@@ -232,7 +233,7 @@ TextInput.displayName = 'TextInput';
|
|
|
232
233
|
* item is a CSS object to be passed to Emotion's `css` function
|
|
233
234
|
**/
|
|
234
235
|
var useInputStyles = function useInputStyles(_ref2) {
|
|
235
|
-
var _theme$components$tex;
|
|
236
|
+
var _theme$components$tex, _theme$components$tex2;
|
|
236
237
|
var disabled = _ref2.disabled,
|
|
237
238
|
startAdornment = _ref2.startAdornment,
|
|
238
239
|
endAdornment = _ref2.endAdornment,
|
|
@@ -262,7 +263,7 @@ var useInputStyles = function useInputStyles(_ref2) {
|
|
|
262
263
|
width: 'full'
|
|
263
264
|
}, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
|
|
264
265
|
':enabled': {
|
|
265
|
-
':focus + [data-focus-indicator]': (_theme$components$tex = theme$1.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
|
|
266
|
+
':focus + [data-focus-indicator]': (_theme$components$tex = (_theme$components$tex2 = theme$1.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
|
|
266
267
|
borderColor: theme$1.border.color.fieldAccent
|
|
267
268
|
}, focusRingStyles)
|
|
268
269
|
},
|
|
@@ -123,6 +123,7 @@ var InputContainer = function InputContainer(_ref) {
|
|
|
123
123
|
}));
|
|
124
124
|
};
|
|
125
125
|
var FocusIndicator = function FocusIndicator(_ref2) {
|
|
126
|
+
var _theme$components$tex, _theme$components$tex2, _theme$components$tex3;
|
|
126
127
|
var invalid = _ref2.invalid;
|
|
127
128
|
var theme = useTheme();
|
|
128
129
|
return jsx(Box, {
|
|
@@ -133,14 +134,14 @@ var FocusIndicator = function FocusIndicator(_ref2) {
|
|
|
133
134
|
}
|
|
134
135
|
// Styles
|
|
135
136
|
,
|
|
136
|
-
border: invalid ? 'critical' : theme.components.textInput.borderColor,
|
|
137
|
-
borderRadius: theme.components.textInput.borderRadius,
|
|
137
|
+
border: invalid ? 'critical' : (_theme$components$tex = theme.components.textInput) === null || _theme$components$tex === void 0 ? void 0 : _theme$components$tex.borderColor,
|
|
138
|
+
borderRadius: (_theme$components$tex2 = theme.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.borderRadius,
|
|
138
139
|
position: "absolute",
|
|
139
140
|
bottom: 0,
|
|
140
141
|
left: 0,
|
|
141
142
|
right: 0,
|
|
142
143
|
top: 0,
|
|
143
|
-
shadow: theme.components.textInput.boxShadow,
|
|
144
|
+
shadow: (_theme$components$tex3 = theme.components.textInput) === null || _theme$components$tex3 === void 0 ? void 0 : _theme$components$tex3.boxShadow,
|
|
144
145
|
css: css({
|
|
145
146
|
pointerEvents: 'none'
|
|
146
147
|
})
|
|
@@ -228,7 +229,7 @@ TextInput.displayName = 'TextInput';
|
|
|
228
229
|
* item is a CSS object to be passed to Emotion's `css` function
|
|
229
230
|
**/
|
|
230
231
|
var useInputStyles = function useInputStyles(_ref2) {
|
|
231
|
-
var _theme$components$tex;
|
|
232
|
+
var _theme$components$tex, _theme$components$tex2;
|
|
232
233
|
var disabled = _ref2.disabled,
|
|
233
234
|
startAdornment = _ref2.startAdornment,
|
|
234
235
|
endAdornment = _ref2.endAdornment,
|
|
@@ -258,7 +259,7 @@ var useInputStyles = function useInputStyles(_ref2) {
|
|
|
258
259
|
width: 'full'
|
|
259
260
|
}, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
|
|
260
261
|
':enabled': {
|
|
261
|
-
':focus + [data-focus-indicator]': (_theme$components$tex = theme.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
|
|
262
|
+
':focus + [data-focus-indicator]': (_theme$components$tex = (_theme$components$tex2 = theme.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
|
|
262
263
|
borderColor: theme.border.color.fieldAccent
|
|
263
264
|
}, focusRingStyles)
|
|
264
265
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/text-input",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.4.0",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -18,19 +18,19 @@
|
|
|
18
18
|
"@babel/runtime": "^7.25.0",
|
|
19
19
|
"@emotion/react": "^11.14.0",
|
|
20
20
|
"@spark-web/a11y": "^5.0.0",
|
|
21
|
-
"@spark-web/box": "^5.2.
|
|
22
|
-
"@spark-web/text": "^5.
|
|
21
|
+
"@spark-web/box": "^5.2.2",
|
|
22
|
+
"@spark-web/text": "^5.2.3",
|
|
23
23
|
"@spark-web/utils": "^5.0.0"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@spark-web/field": "^5.1.
|
|
27
|
-
"@spark-web/theme": "^5.
|
|
26
|
+
"@spark-web/field": "^5.1.3",
|
|
27
|
+
"@spark-web/theme": "^5.12.1",
|
|
28
28
|
"@types/react": "^18.2.0",
|
|
29
29
|
"react": "^18.2.0"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
|
-
"@spark-web/field": "^5.1.
|
|
33
|
-
"@spark-web/theme": "^5.
|
|
32
|
+
"@spark-web/field": "^5.1.3",
|
|
33
|
+
"@spark-web/theme": "^5.12.1",
|
|
34
34
|
"react": ">=17.0.2"
|
|
35
35
|
},
|
|
36
36
|
"engines": {
|