@spark-web/field 5.2.0-rc.0 → 5.2.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 (7) hide show
  1. package/CHANGELOG.md +27 -10
  2. package/dist/declarations/src/context.d.ts +1 -0
  3. package/dist/declarations/src/field.d.ts +3 -1
  4. package/dist/spark-web-field.cjs.dev.js +15 -8
  5. package/dist/spark-web-field.cjs.prod.js +15 -8
  6. package/dist/spark-web-field.esm.js +15 -8
  7. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -1,21 +1,38 @@
1
1
  # @spark-web/field
2
2
 
3
- ## 5.2.0-rc.0
3
+ ## 5.2.0
4
4
 
5
5
  ### Minor Changes
6
6
 
7
- - update react version and other packages
7
+ - [#741](https://github.com/brighte-labs/spark-web/pull/741)
8
+ [`3a5ee14`](https://github.com/brighte-labs/spark-web/pull/741/changes/3a5ee146fef8fb3a3e46f6873099438bcffd59d2)
9
+ Thanks [@raivenlopez](https://github.com/raivenlopez)! - Allow both component
10
+ and text in Field description
11
+
12
+ ## 5.1.3
8
13
 
9
14
  ### Patch Changes
10
15
 
11
- - Updated dependencies []:
12
- - @spark-web/stack@5.1.0-rc.0
13
- - @spark-web/theme@5.12.0-rc.0
14
- - @spark-web/utils@5.1.0-rc.0
15
- - @spark-web/a11y@5.3.0-rc.0
16
- - @spark-web/icon@5.1.0-rc.0
17
- - @spark-web/text@5.3.0-rc.0
18
- - @spark-web/box@6.0.0-rc.0
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/stack@5.0.2
24
+ - @spark-web/text@5.2.3
25
+ - @spark-web/theme@5.12.1
26
+
27
+ ## 5.1.2
28
+
29
+ ### Patch Changes
30
+
31
+ - Updated dependencies
32
+ [[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
33
+ - @spark-web/theme@5.12.0
34
+ - @spark-web/stack@5.0.1
35
+ - @spark-web/text@5.2.2
19
36
 
20
37
  ## 5.1.1
21
38
 
package/dist/declarations/src/context.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  export declare type FieldState = {
3
3
  disabled: boolean;
4
4
  invalid: boolean;
5
+ readOnly?: boolean;
5
6
  };
6
7
  export declare type InputPropsDerivedFromField = {
7
8
  'aria-describedby'?: string;
package/dist/declarations/src/field.d.ts CHANGED
@@ -16,7 +16,7 @@ export declare type FieldProps = {
16
16
  */
17
17
  disabled?: boolean;
18
18
  /** Provide additional information that will aid user input. */
19
- description?: string;
19
+ description?: string | ReactNode;
20
20
  /** Concisely label the field. */
21
21
  label: string;
22
22
  /**
@@ -30,6 +30,8 @@ export declare type FieldProps = {
30
30
  secondaryLabel?: string;
31
31
  /** Provide a tone to influence elements of the field, and its input. */
32
32
  tone?: Tone;
33
+ /** Sets input to readonly, which is focusable. */
34
+ readOnly?: boolean;
33
35
  };
34
36
  /**
35
37
  * Using a [context](https://reactjs.org/docs/context.html), the field
package/dist/spark-web-field.cjs.dev.js CHANGED
@@ -41,7 +41,9 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
41
41
  message = _ref.message,
42
42
  secondaryLabel = _ref.secondaryLabel,
43
43
  _ref$tone = _ref.tone,
44
- tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
44
+ tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
45
+ _ref$readOnly = _ref.readOnly,
46
+ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
45
47
  var _useFieldIds = useFieldIds(idProp),
46
48
  descriptionId = _useFieldIds.descriptionId,
47
49
  inputId = _useFieldIds.inputId,
@@ -52,13 +54,14 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
52
54
  var fieldContext = react.useMemo(function () {
53
55
  return [{
54
56
  disabled: disabled,
55
- invalid: invalid
57
+ invalid: invalid,
58
+ readOnly: readOnly
56
59
  }, {
57
- 'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
60
+ 'aria-describedby': a11y.mergeIds(message && messageId, description ? descriptionId : undefined),
58
61
  'aria-invalid': invalid || undefined,
59
62
  id: inputId
60
63
  }];
61
- }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
64
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId, readOnly]);
62
65
 
63
66
  // label prep
64
67
  var hiddenLabel = jsxRuntime.jsxs(a11y.VisuallyHidden, {
@@ -72,11 +75,11 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
72
75
  as: "label",
73
76
  htmlFor: inputId,
74
77
  children: jsxRuntime.jsxs(text.Text, {
75
- tone: disabled ? 'disabled' : 'neutral',
78
+ tone: disabled || readOnly ? 'field' : 'neutral',
76
79
  weight: "semibold",
77
80
  children: [label, ' ', secondaryLabel && jsxRuntime.jsx(text.Text, {
78
81
  inline: true,
79
- tone: disabled ? 'disabled' : 'muted',
82
+ tone: disabled || readOnly ? 'field' : 'muted',
80
83
  weight: "regular",
81
84
  children: secondaryLabel
82
85
  })]
@@ -98,12 +101,16 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
98
101
  gap: "medium",
99
102
  children: [jsxRuntime.jsxs(LabelWrapper, {
100
103
  children: [labelElement[labelVisibility], adornment]
101
- }), description && jsxRuntime.jsx(text.Text, {
104
+ }), description && (typeof description === 'string' ? jsxRuntime.jsx(text.Text, {
102
105
  tone: "muted",
103
106
  size: "small",
104
107
  id: descriptionId,
105
108
  children: description
106
- }), children, message && jsxRuntime.jsx(FieldMessage, {
109
+ }) : jsxRuntime.jsx(box.Box, {
110
+ as: "label",
111
+ htmlFor: descriptionId,
112
+ children: description
113
+ })), children, message && jsxRuntime.jsx(FieldMessage, {
107
114
  tone: tone,
108
115
  id: messageId,
109
116
  message: message
package/dist/spark-web-field.cjs.prod.js CHANGED
@@ -41,7 +41,9 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
41
41
  message = _ref.message,
42
42
  secondaryLabel = _ref.secondaryLabel,
43
43
  _ref$tone = _ref.tone,
44
- tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
44
+ tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
45
+ _ref$readOnly = _ref.readOnly,
46
+ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
45
47
  var _useFieldIds = useFieldIds(idProp),
46
48
  descriptionId = _useFieldIds.descriptionId,
47
49
  inputId = _useFieldIds.inputId,
@@ -52,13 +54,14 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
52
54
  var fieldContext = react.useMemo(function () {
53
55
  return [{
54
56
  disabled: disabled,
55
- invalid: invalid
57
+ invalid: invalid,
58
+ readOnly: readOnly
56
59
  }, {
57
- 'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
60
+ 'aria-describedby': a11y.mergeIds(message && messageId, description ? descriptionId : undefined),
58
61
  'aria-invalid': invalid || undefined,
59
62
  id: inputId
60
63
  }];
61
- }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
64
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId, readOnly]);
62
65
 
63
66
  // label prep
64
67
  var hiddenLabel = jsxRuntime.jsxs(a11y.VisuallyHidden, {
@@ -72,11 +75,11 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
72
75
  as: "label",
73
76
  htmlFor: inputId,
74
77
  children: jsxRuntime.jsxs(text.Text, {
75
- tone: disabled ? 'disabled' : 'neutral',
78
+ tone: disabled || readOnly ? 'field' : 'neutral',
76
79
  weight: "semibold",
77
80
  children: [label, ' ', secondaryLabel && jsxRuntime.jsx(text.Text, {
78
81
  inline: true,
79
- tone: disabled ? 'disabled' : 'muted',
82
+ tone: disabled || readOnly ? 'field' : 'muted',
80
83
  weight: "regular",
81
84
  children: secondaryLabel
82
85
  })]
@@ -98,12 +101,16 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
98
101
  gap: "medium",
99
102
  children: [jsxRuntime.jsxs(LabelWrapper, {
100
103
  children: [labelElement[labelVisibility], adornment]
101
- }), description && jsxRuntime.jsx(text.Text, {
104
+ }), description && (typeof description === 'string' ? jsxRuntime.jsx(text.Text, {
102
105
  tone: "muted",
103
106
  size: "small",
104
107
  id: descriptionId,
105
108
  children: description
106
- }), children, message && jsxRuntime.jsx(FieldMessage, {
109
+ }) : jsxRuntime.jsx(box.Box, {
110
+ as: "label",
111
+ htmlFor: descriptionId,
112
+ children: description
113
+ })), children, message && jsxRuntime.jsx(FieldMessage, {
107
114
  tone: tone,
108
115
  id: messageId,
109
116
  message: message
package/dist/spark-web-field.esm.js CHANGED
@@ -37,7 +37,9 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
37
37
  message = _ref.message,
38
38
  secondaryLabel = _ref.secondaryLabel,
39
39
  _ref$tone = _ref.tone,
40
- tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
40
+ tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
41
+ _ref$readOnly = _ref.readOnly,
42
+ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
41
43
  var _useFieldIds = useFieldIds(idProp),
42
44
  descriptionId = _useFieldIds.descriptionId,
43
45
  inputId = _useFieldIds.inputId,
@@ -48,13 +50,14 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
48
50
  var fieldContext = useMemo(function () {
49
51
  return [{
50
52
  disabled: disabled,
51
- invalid: invalid
53
+ invalid: invalid,
54
+ readOnly: readOnly
52
55
  }, {
53
- 'aria-describedby': mergeIds(message && messageId, description && descriptionId),
56
+ 'aria-describedby': mergeIds(message && messageId, description ? descriptionId : undefined),
54
57
  'aria-invalid': invalid || undefined,
55
58
  id: inputId
56
59
  }];
57
- }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
60
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId, readOnly]);
58
61
 
59
62
  // label prep
60
63
  var hiddenLabel = jsxs(VisuallyHidden, {
@@ -68,11 +71,11 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
68
71
  as: "label",
69
72
  htmlFor: inputId,
70
73
  children: jsxs(Text, {
71
- tone: disabled ? 'disabled' : 'neutral',
74
+ tone: disabled || readOnly ? 'field' : 'neutral',
72
75
  weight: "semibold",
73
76
  children: [label, ' ', secondaryLabel && jsx(Text, {
74
77
  inline: true,
75
- tone: disabled ? 'disabled' : 'muted',
78
+ tone: disabled || readOnly ? 'field' : 'muted',
76
79
  weight: "regular",
77
80
  children: secondaryLabel
78
81
  })]
@@ -94,12 +97,16 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
94
97
  gap: "medium",
95
98
  children: [jsxs(LabelWrapper, {
96
99
  children: [labelElement[labelVisibility], adornment]
97
- }), description && jsx(Text, {
100
+ }), description && (typeof description === 'string' ? jsx(Text, {
98
101
  tone: "muted",
99
102
  size: "small",
100
103
  id: descriptionId,
101
104
  children: description
102
- }), children, message && jsx(FieldMessage, {
105
+ }) : jsx(Box, {
106
+ as: "label",
107
+ htmlFor: descriptionId,
108
+ children: description
109
+ })), children, message && jsx(FieldMessage, {
103
110
  tone: tone,
104
111
  id: messageId,
105
112
  message: message
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/field",
3
- "version": "5.2.0-rc.0",
3
+ "version": "5.2.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,20 +17,20 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.25.0",
19
19
  "@emotion/react": "^11.14.0",
20
- "@spark-web/a11y": "^5.3.0-rc.0",
21
- "@spark-web/box": "^6.0.0-rc.0",
22
- "@spark-web/icon": "^5.1.0-rc.0",
23
- "@spark-web/stack": "^5.1.0-rc.0",
24
- "@spark-web/text": "^5.3.0-rc.0",
25
- "@spark-web/theme": "^5.12.0-rc.0",
26
- "@spark-web/utils": "^5.1.0-rc.0"
20
+ "@spark-web/a11y": "^5.0.0",
21
+ "@spark-web/box": "^5.2.2",
22
+ "@spark-web/icon": "^5.0.0",
23
+ "@spark-web/stack": "^5.0.2",
24
+ "@spark-web/text": "^5.2.3",
25
+ "@spark-web/theme": "^5.12.1",
26
+ "@spark-web/utils": "^5.0.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@types/react": "^19.1.0",
30
- "react": "^19.1.0"
29
+ "@types/react": "^18.2.0",
30
+ "react": "^18.2.0"
31
31
  },
32
32
  "peerDependencies": {
33
- "react": ">=19.1.0"
33
+ "react": ">=17.0.2"
34
34
  },
35
35
  "engines": {
36
36
  "node": ">=14"