@spark-web/field 3.0.6 → 3.1.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 (5) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/spark-web-field.cjs.dev.js +31 -32
  3. package/dist/spark-web-field.cjs.prod.js +31 -32
  4. package/dist/spark-web-field.esm.js +31 -32
  5. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @spark-web/field
2
2
 
3
+ ## 3.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#382](https://github.com/brighte-labs/spark-web/pull/382)
8
+ [`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
9
+ Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
10
+ version to latest (18.2.0)
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+ [[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
16
+ - @spark-web/a11y@1.4.0
17
+ - @spark-web/box@1.2.0
18
+ - @spark-web/icon@1.3.0
19
+ - @spark-web/stack@1.1.0
20
+ - @spark-web/text@1.2.0
21
+ - @spark-web/theme@3.2.0
22
+ - @spark-web/utils@1.3.0
23
+
3
24
  ## 3.0.6
4
25
 
5
26
  ### Patch Changes
package/dist/spark-web-field.cjs.dev.js CHANGED
@@ -17,11 +17,9 @@ var FieldContextProvider = FieldContext.Provider;
17
17
  var FIELD_CONTEXT_ERROR_MESSAGE = 'Input components must be inside a `Field`.';
18
18
  function useFieldContext() {
19
19
  var ctx = react.useContext(FieldContext);
20
-
21
20
  if (!ctx) {
22
21
  throw new Error(FIELD_CONTEXT_ERROR_MESSAGE);
23
22
  }
24
-
25
23
  return ctx;
26
24
  }
27
25
 
@@ -31,26 +29,25 @@ function useFieldContext() {
31
29
  */
32
30
  var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
33
31
  var children = _ref.children,
34
- idProp = _ref.id,
35
- data = _ref.data,
36
- description = _ref.description,
37
- _ref$disabled = _ref.disabled,
38
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
39
- label = _ref.label,
40
- adornment = _ref.adornment,
41
- _ref$labelVisibility = _ref.labelVisibility,
42
- labelVisibility = _ref$labelVisibility === void 0 ? 'visible' : _ref$labelVisibility,
43
- message = _ref.message,
44
- secondaryLabel = _ref.secondaryLabel,
45
- _ref$tone = _ref.tone,
46
- tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
47
-
32
+ idProp = _ref.id,
33
+ data = _ref.data,
34
+ description = _ref.description,
35
+ _ref$disabled = _ref.disabled,
36
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
37
+ label = _ref.label,
38
+ adornment = _ref.adornment,
39
+ _ref$labelVisibility = _ref.labelVisibility,
40
+ labelVisibility = _ref$labelVisibility === void 0 ? 'visible' : _ref$labelVisibility,
41
+ message = _ref.message,
42
+ secondaryLabel = _ref.secondaryLabel,
43
+ _ref$tone = _ref.tone,
44
+ tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
48
45
  var _useFieldIds = useFieldIds(idProp),
49
- descriptionId = _useFieldIds.descriptionId,
50
- inputId = _useFieldIds.inputId,
51
- messageId = _useFieldIds.messageId; // field context
52
-
46
+ descriptionId = _useFieldIds.descriptionId,
47
+ inputId = _useFieldIds.inputId,
48
+ messageId = _useFieldIds.messageId;
53
49
 
50
+ // field context
54
51
  var invalid = Boolean(message && tone === 'critical');
55
52
  var fieldContext = react.useMemo(function () {
56
53
  return [{
@@ -61,14 +58,14 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
61
58
  'aria-invalid': invalid || undefined,
62
59
  id: inputId
63
60
  }];
64
- }, [description, descriptionId, disabled, inputId, invalid, message, messageId]); // label prep
61
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
65
62
 
63
+ // label prep
66
64
  var hiddenLabel = /*#__PURE__*/jsxRuntime.jsxs(a11y.VisuallyHidden, {
67
65
  as: "label",
68
66
  htmlFor: inputId,
69
67
  children: [label, " ", secondaryLabel]
70
68
  });
71
-
72
69
  var labelElement = {
73
70
  hidden: hiddenLabel,
74
71
  visible: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
@@ -114,7 +111,9 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
114
111
  })
115
112
  });
116
113
  });
117
- Field.displayName = 'Field'; // Utils
114
+ Field.displayName = 'Field';
115
+
116
+ // Utils
118
117
  // ------------------------------
119
118
 
120
119
  function useFieldIds(id) {
@@ -126,9 +125,10 @@ function useFieldIds(id) {
126
125
  inputId: inputId,
127
126
  messageId: messageId
128
127
  };
129
- } // Styled components
130
- // ------------------------------
128
+ }
131
129
 
130
+ // Styled components
131
+ // ------------------------------
132
132
  function FieldLabelWrapper(_ref2) {
133
133
  var children = _ref2.children;
134
134
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
@@ -139,13 +139,13 @@ function FieldLabelWrapper(_ref2) {
139
139
  children: children
140
140
  });
141
141
  }
142
-
143
142
  var messageToneMap = {
144
143
  critical: 'critical',
145
144
  neutral: 'muted',
146
145
  positive: 'positive'
147
- }; // NOTE: use icons in addition to color for folks with visions issues
146
+ };
148
147
 
148
+ // NOTE: use icons in addition to color for folks with visions issues
149
149
  var messageIconMap = {
150
150
  critical: icon.ExclamationCircleIcon,
151
151
  neutral: null,
@@ -153,8 +153,8 @@ var messageIconMap = {
153
153
  };
154
154
  var FieldMessage = function FieldMessage(_ref3) {
155
155
  var message = _ref3.message,
156
- id = _ref3.id,
157
- tone = _ref3.tone;
156
+ id = _ref3.id,
157
+ tone = _ref3.tone;
158
158
  var textTone = messageToneMap[tone];
159
159
  var Icon = messageIconMap[tone];
160
160
  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
@@ -173,13 +173,12 @@ var FieldMessage = function FieldMessage(_ref3) {
173
173
  })]
174
174
  });
175
175
  };
176
-
177
176
  function IndicatorContainer(_ref4) {
178
177
  var children = _ref4.children;
179
178
  var theme$1 = theme.useTheme();
180
179
  var _theme$typography$tex = theme$1.typography.text.small,
181
- mobile = _theme$typography$tex.mobile,
182
- tablet = _theme$typography$tex.tablet;
180
+ mobile = _theme$typography$tex.mobile,
181
+ tablet = _theme$typography$tex.tablet;
183
182
  var responsiveStyles = theme$1.utils.responsiveStyles({
184
183
  mobile: {
185
184
  height: mobile.capHeight
package/dist/spark-web-field.cjs.prod.js CHANGED
@@ -17,11 +17,9 @@ var FieldContextProvider = FieldContext.Provider;
17
17
  var FIELD_CONTEXT_ERROR_MESSAGE = 'Input components must be inside a `Field`.';
18
18
  function useFieldContext() {
19
19
  var ctx = react.useContext(FieldContext);
20
-
21
20
  if (!ctx) {
22
21
  throw new Error(FIELD_CONTEXT_ERROR_MESSAGE);
23
22
  }
24
-
25
23
  return ctx;
26
24
  }
27
25
 
@@ -31,26 +29,25 @@ function useFieldContext() {
31
29
  */
32
30
  var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
33
31
  var children = _ref.children,
34
- idProp = _ref.id,
35
- data = _ref.data,
36
- description = _ref.description,
37
- _ref$disabled = _ref.disabled,
38
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
39
- label = _ref.label,
40
- adornment = _ref.adornment,
41
- _ref$labelVisibility = _ref.labelVisibility,
42
- labelVisibility = _ref$labelVisibility === void 0 ? 'visible' : _ref$labelVisibility,
43
- message = _ref.message,
44
- secondaryLabel = _ref.secondaryLabel,
45
- _ref$tone = _ref.tone,
46
- tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
47
-
32
+ idProp = _ref.id,
33
+ data = _ref.data,
34
+ description = _ref.description,
35
+ _ref$disabled = _ref.disabled,
36
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
37
+ label = _ref.label,
38
+ adornment = _ref.adornment,
39
+ _ref$labelVisibility = _ref.labelVisibility,
40
+ labelVisibility = _ref$labelVisibility === void 0 ? 'visible' : _ref$labelVisibility,
41
+ message = _ref.message,
42
+ secondaryLabel = _ref.secondaryLabel,
43
+ _ref$tone = _ref.tone,
44
+ tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
48
45
  var _useFieldIds = useFieldIds(idProp),
49
- descriptionId = _useFieldIds.descriptionId,
50
- inputId = _useFieldIds.inputId,
51
- messageId = _useFieldIds.messageId; // field context
52
-
46
+ descriptionId = _useFieldIds.descriptionId,
47
+ inputId = _useFieldIds.inputId,
48
+ messageId = _useFieldIds.messageId;
53
49
 
50
+ // field context
54
51
  var invalid = Boolean(message && tone === 'critical');
55
52
  var fieldContext = react.useMemo(function () {
56
53
  return [{
@@ -61,14 +58,14 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
61
58
  'aria-invalid': invalid || undefined,
62
59
  id: inputId
63
60
  }];
64
- }, [description, descriptionId, disabled, inputId, invalid, message, messageId]); // label prep
61
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
65
62
 
63
+ // label prep
66
64
  var hiddenLabel = /*#__PURE__*/jsxRuntime.jsxs(a11y.VisuallyHidden, {
67
65
  as: "label",
68
66
  htmlFor: inputId,
69
67
  children: [label, " ", secondaryLabel]
70
68
  });
71
-
72
69
  var labelElement = {
73
70
  hidden: hiddenLabel,
74
71
  visible: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
@@ -114,7 +111,9 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
114
111
  })
115
112
  });
116
113
  });
117
- Field.displayName = 'Field'; // Utils
114
+ Field.displayName = 'Field';
115
+
116
+ // Utils
118
117
  // ------------------------------
119
118
 
120
119
  function useFieldIds(id) {
@@ -126,9 +125,10 @@ function useFieldIds(id) {
126
125
  inputId: inputId,
127
126
  messageId: messageId
128
127
  };
129
- } // Styled components
130
- // ------------------------------
128
+ }
131
129
 
130
+ // Styled components
131
+ // ------------------------------
132
132
  function FieldLabelWrapper(_ref2) {
133
133
  var children = _ref2.children;
134
134
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
@@ -139,13 +139,13 @@ function FieldLabelWrapper(_ref2) {
139
139
  children: children
140
140
  });
141
141
  }
142
-
143
142
  var messageToneMap = {
144
143
  critical: 'critical',
145
144
  neutral: 'muted',
146
145
  positive: 'positive'
147
- }; // NOTE: use icons in addition to color for folks with visions issues
146
+ };
148
147
 
148
+ // NOTE: use icons in addition to color for folks with visions issues
149
149
  var messageIconMap = {
150
150
  critical: icon.ExclamationCircleIcon,
151
151
  neutral: null,
@@ -153,8 +153,8 @@ var messageIconMap = {
153
153
  };
154
154
  var FieldMessage = function FieldMessage(_ref3) {
155
155
  var message = _ref3.message,
156
- id = _ref3.id,
157
- tone = _ref3.tone;
156
+ id = _ref3.id,
157
+ tone = _ref3.tone;
158
158
  var textTone = messageToneMap[tone];
159
159
  var Icon = messageIconMap[tone];
160
160
  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
@@ -173,13 +173,12 @@ var FieldMessage = function FieldMessage(_ref3) {
173
173
  })]
174
174
  });
175
175
  };
176
-
177
176
  function IndicatorContainer(_ref4) {
178
177
  var children = _ref4.children;
179
178
  var theme$1 = theme.useTheme();
180
179
  var _theme$typography$tex = theme$1.typography.text.small,
181
- mobile = _theme$typography$tex.mobile,
182
- tablet = _theme$typography$tex.tablet;
180
+ mobile = _theme$typography$tex.mobile,
181
+ tablet = _theme$typography$tex.tablet;
183
182
  var responsiveStyles = theme$1.utils.responsiveStyles({
184
183
  mobile: {
185
184
  height: mobile.capHeight
package/dist/spark-web-field.esm.js CHANGED
@@ -13,11 +13,9 @@ var FieldContextProvider = FieldContext.Provider;
13
13
  var FIELD_CONTEXT_ERROR_MESSAGE = 'Input components must be inside a `Field`.';
14
14
  function useFieldContext() {
15
15
  var ctx = useContext(FieldContext);
16
-
17
16
  if (!ctx) {
18
17
  throw new Error(FIELD_CONTEXT_ERROR_MESSAGE);
19
18
  }
20
-
21
19
  return ctx;
22
20
  }
23
21
 
@@ -27,26 +25,25 @@ function useFieldContext() {
27
25
  */
28
26
  var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
29
27
  var children = _ref.children,
30
- idProp = _ref.id,
31
- data = _ref.data,
32
- description = _ref.description,
33
- _ref$disabled = _ref.disabled,
34
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
35
- label = _ref.label,
36
- adornment = _ref.adornment,
37
- _ref$labelVisibility = _ref.labelVisibility,
38
- labelVisibility = _ref$labelVisibility === void 0 ? 'visible' : _ref$labelVisibility,
39
- message = _ref.message,
40
- secondaryLabel = _ref.secondaryLabel,
41
- _ref$tone = _ref.tone,
42
- tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
43
-
28
+ idProp = _ref.id,
29
+ data = _ref.data,
30
+ description = _ref.description,
31
+ _ref$disabled = _ref.disabled,
32
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
33
+ label = _ref.label,
34
+ adornment = _ref.adornment,
35
+ _ref$labelVisibility = _ref.labelVisibility,
36
+ labelVisibility = _ref$labelVisibility === void 0 ? 'visible' : _ref$labelVisibility,
37
+ message = _ref.message,
38
+ secondaryLabel = _ref.secondaryLabel,
39
+ _ref$tone = _ref.tone,
40
+ tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
44
41
  var _useFieldIds = useFieldIds(idProp),
45
- descriptionId = _useFieldIds.descriptionId,
46
- inputId = _useFieldIds.inputId,
47
- messageId = _useFieldIds.messageId; // field context
48
-
42
+ descriptionId = _useFieldIds.descriptionId,
43
+ inputId = _useFieldIds.inputId,
44
+ messageId = _useFieldIds.messageId;
49
45
 
46
+ // field context
50
47
  var invalid = Boolean(message && tone === 'critical');
51
48
  var fieldContext = useMemo(function () {
52
49
  return [{
@@ -57,14 +54,14 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
57
54
  'aria-invalid': invalid || undefined,
58
55
  id: inputId
59
56
  }];
60
- }, [description, descriptionId, disabled, inputId, invalid, message, messageId]); // label prep
57
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
61
58
 
59
+ // label prep
62
60
  var hiddenLabel = /*#__PURE__*/jsxs(VisuallyHidden, {
63
61
  as: "label",
64
62
  htmlFor: inputId,
65
63
  children: [label, " ", secondaryLabel]
66
64
  });
67
-
68
65
  var labelElement = {
69
66
  hidden: hiddenLabel,
70
67
  visible: /*#__PURE__*/jsx(Box, {
@@ -110,7 +107,9 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
110
107
  })
111
108
  });
112
109
  });
113
- Field.displayName = 'Field'; // Utils
110
+ Field.displayName = 'Field';
111
+
112
+ // Utils
114
113
  // ------------------------------
115
114
 
116
115
  function useFieldIds(id) {
@@ -122,9 +121,10 @@ function useFieldIds(id) {
122
121
  inputId: inputId,
123
122
  messageId: messageId
124
123
  };
125
- } // Styled components
126
- // ------------------------------
124
+ }
127
125
 
126
+ // Styled components
127
+ // ------------------------------
128
128
  function FieldLabelWrapper(_ref2) {
129
129
  var children = _ref2.children;
130
130
  return /*#__PURE__*/jsx(Box, {
@@ -135,13 +135,13 @@ function FieldLabelWrapper(_ref2) {
135
135
  children: children
136
136
  });
137
137
  }
138
-
139
138
  var messageToneMap = {
140
139
  critical: 'critical',
141
140
  neutral: 'muted',
142
141
  positive: 'positive'
143
- }; // NOTE: use icons in addition to color for folks with visions issues
142
+ };
144
143
 
144
+ // NOTE: use icons in addition to color for folks with visions issues
145
145
  var messageIconMap = {
146
146
  critical: ExclamationCircleIcon,
147
147
  neutral: null,
@@ -149,8 +149,8 @@ var messageIconMap = {
149
149
  };
150
150
  var FieldMessage = function FieldMessage(_ref3) {
151
151
  var message = _ref3.message,
152
- id = _ref3.id,
153
- tone = _ref3.tone;
152
+ id = _ref3.id,
153
+ tone = _ref3.tone;
154
154
  var textTone = messageToneMap[tone];
155
155
  var Icon = messageIconMap[tone];
156
156
  return /*#__PURE__*/jsxs(Box, {
@@ -169,13 +169,12 @@ var FieldMessage = function FieldMessage(_ref3) {
169
169
  })]
170
170
  });
171
171
  };
172
-
173
172
  function IndicatorContainer(_ref4) {
174
173
  var children = _ref4.children;
175
174
  var theme = useTheme();
176
175
  var _theme$typography$tex = theme.typography.text.small,
177
- mobile = _theme$typography$tex.mobile,
178
- tablet = _theme$typography$tex.tablet;
176
+ mobile = _theme$typography$tex.mobile,
177
+ tablet = _theme$typography$tex.tablet;
179
178
  var responsiveStyles = theme.utils.responsiveStyles({
180
179
  mobile: {
181
180
  height: mobile.capHeight
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/field",
3
- "version": "3.0.6",
3
+ "version": "3.1.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,17 +17,17 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.19.0",
19
19
  "@emotion/css": "^11.9.0",
20
- "@spark-web/a11y": "^1.3.2",
21
- "@spark-web/box": "^1.1.0",
22
- "@spark-web/icon": "^1.2.2",
23
- "@spark-web/stack": "^1.0.10",
24
- "@spark-web/text": "^1.1.2",
25
- "@spark-web/theme": "^3.1.0",
26
- "@spark-web/utils": "^1.2.3"
20
+ "@spark-web/a11y": "^1.4.0",
21
+ "@spark-web/box": "^1.2.0",
22
+ "@spark-web/icon": "^1.3.0",
23
+ "@spark-web/stack": "^1.1.0",
24
+ "@spark-web/text": "^1.2.0",
25
+ "@spark-web/theme": "^3.2.0",
26
+ "@spark-web/utils": "^1.3.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@types/react": "^17.0.12",
30
- "react": "^17.0.2"
29
+ "@types/react": "^18.2.0",
30
+ "react": "^18.2.0"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "react": ">=17.0.2"