@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.0",
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.0",
22
- "@spark-web/text": "^5.0.0",
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.1",
27
- "@spark-web/theme": "^5.10.6",
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.1",
33
- "@spark-web/theme": "^5.10.6",
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": {