@spark-web/text-input 5.1.2 → 5.3.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/declarations/src/text-input.d.ts +37 -25
  3. package/dist/spark-web-text-input.cjs.dev.js +4 -3
  4. package/dist/spark-web-text-input.cjs.prod.js +4 -3
  5. package/dist/spark-web-text-input.esm.js +4 -3
  6. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @spark-web/text-input
2
2
 
3
+ ## 5.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#652](https://github.com/brighte-labs/spark-web/pull/652)
8
+ [`d93c2a5`](https://github.com/brighte-labs/spark-web/commit/d93c2a5689e217f69002c78ba6cfb77561fc6c1d)
9
+ Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Expose
10
+ autoComplete prop to input components
11
+
12
+ ## 5.2.0
13
+
14
+ ### Minor Changes
15
+
16
+ - [#632](https://github.com/brighte-labs/spark-web/pull/632)
17
+ [`ecb2391`](https://github.com/brighte-labs/spark-web/commit/ecb23918e5994e174bb9b48accd52db940dbcbf0)
18
+ Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Introduce
19
+ component-level theming to TextInput component
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies
24
+ [[`ecb2391`](https://github.com/brighte-labs/spark-web/commit/ecb23918e5994e174bb9b48accd52db940dbcbf0)]:
25
+ - @spark-web/box@5.2.0
26
+
3
27
  ## 5.1.2
4
28
 
5
29
  ### Patch Changes
package/dist/declarations/src/text-input.d.ts CHANGED
@@ -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'>;
8
+ declare type NativeInputProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'value' | 'required' | 'autoComplete'>;
9
9
  export declare type TextInputProps = {
10
10
  /** Sets data attributes for the element. */
11
11
  data?: DataAttributeMap;
@@ -45,7 +45,7 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<{
45
45
  */
46
46
  children?: AdornmentsAsChildren;
47
47
  /** Manage how text behaves with regard to overflow. */
48
- overflowStrategy?: "nowrap" | "truncate" | "breakword" | undefined;
48
+ overflowStrategy?: "truncate" | "nowrap" | "breakword" | undefined;
49
49
  } & NativeInputProps & import("react").RefAttributes<HTMLInputElement>>;
50
50
  export declare type UseInputStylesProps = FieldState & {
51
51
  startAdornment?: boolean;
@@ -62,20 +62,24 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
62
62
  readonly flex: 1;
63
63
  readonly position: "relative";
64
64
  readonly height: "medium";
65
- readonly paddingLeft: "medium" | "none";
66
- readonly paddingRight: "medium" | "none";
65
+ readonly paddingLeft: "none" | "medium";
66
+ readonly paddingRight: "none" | "medium";
67
67
  readonly width: "full";
68
68
  }, {
69
69
  readonly ':enabled': {
70
70
  readonly ':focus + [data-focus-indicator]': {
71
- readonly boxShadow: string;
72
- readonly outline: string;
73
- readonly outlineOffset: string;
74
- readonly borderColor: string;
71
+ boxShadow?: string | undefined;
72
+ outline?: string | undefined;
73
+ outlineOffset?: string | undefined;
75
74
  } | {
76
- readonly outline: string;
77
- readonly outlineOffset: string;
78
- readonly borderColor: string;
75
+ boxShadow: string;
76
+ outline: string;
77
+ outlineOffset: string;
78
+ borderColor: string;
79
+ } | {
80
+ outline: string;
81
+ outlineOffset: string;
82
+ borderColor: string;
79
83
  };
80
84
  };
81
85
  readonly ':focus': {
@@ -1042,14 +1046,18 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
1042
1046
  } | {
1043
1047
  readonly ':enabled': {
1044
1048
  readonly ':focus + [data-focus-indicator]': {
1045
- readonly boxShadow: string;
1046
- readonly outline: string;
1047
- readonly outlineOffset: string;
1048
- readonly borderColor: string;
1049
+ boxShadow?: string | undefined;
1050
+ outline?: string | undefined;
1051
+ outlineOffset?: string | undefined;
1052
+ } | {
1053
+ boxShadow: string;
1054
+ outline: string;
1055
+ outlineOffset: string;
1056
+ borderColor: string;
1049
1057
  } | {
1050
- readonly outline: string;
1051
- readonly outlineOffset: string;
1052
- readonly borderColor: string;
1058
+ outline: string;
1059
+ outlineOffset: string;
1060
+ borderColor: string;
1053
1061
  };
1054
1062
  };
1055
1063
  readonly ':focus': {
@@ -2016,14 +2024,18 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
2016
2024
  } | {
2017
2025
  readonly ':enabled': {
2018
2026
  readonly ':focus + [data-focus-indicator]': {
2019
- readonly boxShadow: string;
2020
- readonly outline: string;
2021
- readonly outlineOffset: string;
2022
- readonly borderColor: string;
2027
+ boxShadow?: string | undefined;
2028
+ outline?: string | undefined;
2029
+ outlineOffset?: string | undefined;
2030
+ } | {
2031
+ boxShadow: string;
2032
+ outline: string;
2033
+ outlineOffset: string;
2034
+ borderColor: string;
2023
2035
  } | {
2024
- readonly outline: string;
2025
- readonly outlineOffset: string;
2026
- readonly borderColor: string;
2036
+ outline: string;
2037
+ outlineOffset: string;
2038
+ borderColor: string;
2027
2039
  };
2028
2040
  };
2029
2041
  readonly ':focus': {
package/dist/spark-web-text-input.cjs.dev.js CHANGED
@@ -138,13 +138,13 @@ var FocusIndicator = function FocusIndicator(_ref2) {
138
138
  // Styles
139
139
  ,
140
140
  border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
141
- borderRadius: "small",
141
+ borderRadius: theme$1.components.textInput.borderRadius,
142
142
  position: "absolute",
143
143
  bottom: 0,
144
144
  left: 0,
145
145
  right: 0,
146
146
  top: 0,
147
- shadow: "small",
147
+ shadow: theme$1.components.textInput.boxShadow,
148
148
  css: react$1.css({
149
149
  pointerEvents: 'none'
150
150
  })
@@ -232,6 +232,7 @@ TextInput.displayName = 'TextInput';
232
232
  * item is a CSS object to be passed to Emotion's `css` function
233
233
  **/
234
234
  var useInputStyles = function useInputStyles(_ref2) {
235
+ var _theme$components$tex;
235
236
  var disabled = _ref2.disabled,
236
237
  startAdornment = _ref2.startAdornment,
237
238
  endAdornment = _ref2.endAdornment,
@@ -261,7 +262,7 @@ var useInputStyles = function useInputStyles(_ref2) {
261
262
  width: 'full'
262
263
  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
263
264
  ':enabled': {
264
- ':focus + [data-focus-indicator]': _objectSpread({
265
+ ':focus + [data-focus-indicator]': (_theme$components$tex = theme$1.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
265
266
  borderColor: theme$1.border.color.fieldAccent
266
267
  }, focusRingStyles)
267
268
  },
package/dist/spark-web-text-input.cjs.prod.js CHANGED
@@ -138,13 +138,13 @@ var FocusIndicator = function FocusIndicator(_ref2) {
138
138
  // Styles
139
139
  ,
140
140
  border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
141
- borderRadius: "small",
141
+ borderRadius: theme$1.components.textInput.borderRadius,
142
142
  position: "absolute",
143
143
  bottom: 0,
144
144
  left: 0,
145
145
  right: 0,
146
146
  top: 0,
147
- shadow: "small",
147
+ shadow: theme$1.components.textInput.boxShadow,
148
148
  css: react$1.css({
149
149
  pointerEvents: 'none'
150
150
  })
@@ -232,6 +232,7 @@ TextInput.displayName = 'TextInput';
232
232
  * item is a CSS object to be passed to Emotion's `css` function
233
233
  **/
234
234
  var useInputStyles = function useInputStyles(_ref2) {
235
+ var _theme$components$tex;
235
236
  var disabled = _ref2.disabled,
236
237
  startAdornment = _ref2.startAdornment,
237
238
  endAdornment = _ref2.endAdornment,
@@ -261,7 +262,7 @@ var useInputStyles = function useInputStyles(_ref2) {
261
262
  width: 'full'
262
263
  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
263
264
  ':enabled': {
264
- ':focus + [data-focus-indicator]': _objectSpread({
265
+ ':focus + [data-focus-indicator]': (_theme$components$tex = theme$1.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
265
266
  borderColor: theme$1.border.color.fieldAccent
266
267
  }, focusRingStyles)
267
268
  },
package/dist/spark-web-text-input.esm.js CHANGED
@@ -134,13 +134,13 @@ var FocusIndicator = function FocusIndicator(_ref2) {
134
134
  // Styles
135
135
  ,
136
136
  border: invalid ? 'critical' : theme.components.textInput.borderColor,
137
- borderRadius: "small",
137
+ borderRadius: theme.components.textInput.borderRadius,
138
138
  position: "absolute",
139
139
  bottom: 0,
140
140
  left: 0,
141
141
  right: 0,
142
142
  top: 0,
143
- shadow: "small",
143
+ shadow: theme.components.textInput.boxShadow,
144
144
  css: css({
145
145
  pointerEvents: 'none'
146
146
  })
@@ -228,6 +228,7 @@ TextInput.displayName = 'TextInput';
228
228
  * item is a CSS object to be passed to Emotion's `css` function
229
229
  **/
230
230
  var useInputStyles = function useInputStyles(_ref2) {
231
+ var _theme$components$tex;
231
232
  var disabled = _ref2.disabled,
232
233
  startAdornment = _ref2.startAdornment,
233
234
  endAdornment = _ref2.endAdornment,
@@ -257,7 +258,7 @@ var useInputStyles = function useInputStyles(_ref2) {
257
258
  width: 'full'
258
259
  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
259
260
  ':enabled': {
260
- ':focus + [data-focus-indicator]': _objectSpread({
261
+ ':focus + [data-focus-indicator]': (_theme$components$tex = theme.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
261
262
  borderColor: theme.border.color.fieldAccent
262
263
  }, focusRingStyles)
263
264
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/text-input",
3
- "version": "5.1.2",
3
+ "version": "5.3.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -18,18 +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.0.0",
21
+ "@spark-web/box": "^5.2.0",
22
22
  "@spark-web/text": "^5.0.0",
23
- "@spark-web/theme": "^5.10.6",
24
23
  "@spark-web/utils": "^5.0.0"
25
24
  },
26
25
  "devDependencies": {
27
26
  "@spark-web/field": "^5.1.1",
27
+ "@spark-web/theme": "^5.10.6",
28
28
  "@types/react": "^18.2.0",
29
29
  "react": "^18.2.0"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "@spark-web/field": "^5.1.1",
33
+ "@spark-web/theme": "^5.10.6",
33
34
  "react": ">=17.0.2"
34
35
  },
35
36
  "engines": {