@spark-web/field 3.0.5 → 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 (8) hide show
  1. package/CHANGELOG.md +319 -0
  2. package/README.md +1 -13
  3. package/dist/declarations/src/{Field.d.ts → field.d.ts} +2 -0
  4. package/dist/declarations/src/index.d.ts +2 -2
  5. package/dist/spark-web-field.cjs.dev.js +34 -39
  6. package/dist/spark-web-field.cjs.prod.js +34 -39
  7. package/dist/spark-web-field.esm.js +34 -39
  8. package/package.json +20 -13
package/CHANGELOG.md ADDED
@@ -0,0 +1,319 @@
1
+ # @spark-web/field
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
+
24
+ ## 3.0.6
25
+
26
+ ### Patch Changes
27
+
28
+ - [#246](https://github.com/brighte-labs/spark-web/pull/246)
29
+ [`de99b9c`](https://github.com/brighte-labs/spark-web/commit/de99b9c7f72373bd1902cf67f5cfec9a1e1db01c)
30
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Remove
31
+ destructuring from theme object
32
+
33
+ - [#218](https://github.com/brighte-labs/spark-web/pull/218)
34
+ [`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5)
35
+ Thanks [@nderkim](https://github.com/nderkim)! - Rename files to kebab case
36
+
37
+ - [#222](https://github.com/brighte-labs/spark-web/pull/222)
38
+ [`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b)
39
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
40
+ dependencies
41
+
42
+ - [#242](https://github.com/brighte-labs/spark-web/pull/242)
43
+ [`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)
44
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - - Add homepage
45
+ and repository keys to package.json
46
+ - Add CHANGELOG and README to files key in package.json
47
+ - Updated dependencies
48
+ [[`adc5e9e`](https://github.com/brighte-labs/spark-web/commit/adc5e9e6c99acd117f3261edcefdb5573132441b),
49
+ [`de99b9c`](https://github.com/brighte-labs/spark-web/commit/de99b9c7f72373bd1902cf67f5cfec9a1e1db01c),
50
+ [`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5),
51
+ [`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b),
52
+ [`62f7de8`](https://github.com/brighte-labs/spark-web/commit/62f7de8a2e1df5ae088c093d3acdaa868d3f61fe),
53
+ [`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)]:
54
+ - @spark-web/box@1.1.0
55
+ - @spark-web/icon@1.2.2
56
+ - @spark-web/text@1.1.2
57
+ - @spark-web/a11y@1.3.2
58
+ - @spark-web/stack@1.0.10
59
+ - @spark-web/theme@3.1.0
60
+ - @spark-web/utils@1.2.3
61
+
62
+ ## 3.0.5
63
+
64
+ ### Patch Changes
65
+
66
+ - [#208](https://github.com/brighte-labs/spark-web/pull/208)
67
+ [`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)
68
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Lower required
69
+ node version
70
+
71
+ - Updated dependencies
72
+ [[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)]:
73
+ - @spark-web/a11y@1.3.1
74
+ - @spark-web/box@1.0.9
75
+ - @spark-web/icon@1.2.1
76
+ - @spark-web/stack@1.0.9
77
+ - @spark-web/text@1.1.1
78
+ - @spark-web/theme@3.0.6
79
+ - @spark-web/utils@1.2.2
80
+
81
+ ## 3.0.4
82
+
83
+ ### Patch Changes
84
+
85
+ - [#197](https://github.com/brighte-labs/spark-web/pull/197)
86
+ [`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)
87
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update packages
88
+
89
+ - Updated dependencies
90
+ [[`51b6c7a`](https://github.com/brighte-labs/spark-web/commit/51b6c7a43f441e02b90403b13af9cfa11e5438ef),
91
+ [`9ff0c4b`](https://github.com/brighte-labs/spark-web/commit/9ff0c4b4cc83e0e1ab609d0bcdb01458b654263e),
92
+ [`07286b5`](https://github.com/brighte-labs/spark-web/commit/07286b52f897909b1a806d736e1040351c93078f),
93
+ [`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)]:
94
+ - @spark-web/a11y@1.3.0
95
+ - @spark-web/text@1.1.0
96
+ - @spark-web/icon@1.2.0
97
+ - @spark-web/box@1.0.8
98
+ - @spark-web/stack@1.0.8
99
+ - @spark-web/theme@3.0.5
100
+ - @spark-web/utils@1.2.1
101
+
102
+ ## 3.0.3
103
+
104
+ ### Patch Changes
105
+
106
+ - [#173](https://github.com/brighte-labs/spark-web/pull/173)
107
+ [`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25)
108
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update babel
109
+ dependency
110
+
111
+ - Updated dependencies
112
+ [[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25),
113
+ [`be99536`](https://github.com/brighte-labs/spark-web/commit/be99536abb56dd26e5c9a1703e6df9c7860b449b),
114
+ [`c3867af`](https://github.com/brighte-labs/spark-web/commit/c3867af7b77dfae3580ab63a5d5c9e8452f2da62)]:
115
+ - @spark-web/a11y@1.2.0
116
+ - @spark-web/box@1.0.7
117
+ - @spark-web/icon@1.1.5
118
+ - @spark-web/stack@1.0.7
119
+ - @spark-web/text@1.0.7
120
+ - @spark-web/theme@3.0.3
121
+ - @spark-web/utils@1.2.0
122
+
123
+ ## 3.0.2
124
+
125
+ ### Patch Changes
126
+
127
+ - [#169](https://github.com/brighte-labs/spark-web/pull/169)
128
+ [`7be2283`](https://github.com/brighte-labs/spark-web/commit/7be2283c91741bf87ede08a1e3d9f7eaec586d38)
129
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Memoize Field
130
+ context
131
+
132
+ ## 3.0.1
133
+
134
+ ### Patch Changes
135
+
136
+ - [#167](https://github.com/brighte-labs/spark-web/pull/167)
137
+ [`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459)
138
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
139
+
140
+ - Updated dependencies
141
+ [[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459),
142
+ [`f524009`](https://github.com/brighte-labs/spark-web/commit/f5240098cf731b0a2e351b7b585711e893a33736),
143
+ [`60f7281`](https://github.com/brighte-labs/spark-web/commit/60f7281c4a194d934a2ce561cad47e737b0fb48e)]:
144
+ - @spark-web/a11y@1.1.0
145
+ - @spark-web/box@1.0.6
146
+ - @spark-web/icon@1.1.4
147
+ - @spark-web/stack@1.0.6
148
+ - @spark-web/text@1.0.6
149
+ - @spark-web/theme@3.0.2
150
+ - @spark-web/utils@1.1.5
151
+
152
+ ## 3.0.0
153
+
154
+ ### Major Changes
155
+
156
+ - [#99](https://github.com/brighte-labs/spark-web/pull/99)
157
+ [`3db131b`](https://github.com/brighte-labs/spark-web/commit/3db131bfadbc4149d05b7c74be1a3e68cdd5b18f)
158
+ Thanks [@oscargws](https://github.com/oscargws)! - Removed props spreading
159
+ from multiple packages
160
+
161
+ ## 2.0.1
162
+
163
+ ### Patch Changes
164
+
165
+ - [#128](https://github.com/brighte-labs/spark-web/pull/128)
166
+ [`2a1c354`](https://github.com/brighte-labs/spark-web/commit/2a1c3549e03f91d012906f90b13c1f8d7ba18d1e)
167
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Fix collapsing
168
+ gap on stack that wraps label, description, input and message
169
+
170
+ * [#123](https://github.com/brighte-labs/spark-web/pull/123)
171
+ [`d0ce080`](https://github.com/brighte-labs/spark-web/commit/d0ce08000f4c62d7402450b09f086d5806f1b50b)
172
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Tighten up
173
+ spacing
174
+
175
+ * Updated dependencies
176
+ [[`3d519f7`](https://github.com/brighte-labs/spark-web/commit/3d519f7cd4cf5b36dc09548891c835c294a5acef)]:
177
+ - @spark-web/utils@1.1.4
178
+
179
+ ## 2.0.0
180
+
181
+ ### Major Changes
182
+
183
+ - [#108](https://github.com/brighte-labs/spark-web/pull/108)
184
+ [`efa263a`](https://github.com/brighte-labs/spark-web/commit/efa263aee2c33297edb19203ae1d82abd99d298d)
185
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Refactor
186
+ useFieldContext to return tuple
187
+
188
+ ### Patch Changes
189
+
190
+ - [#113](https://github.com/brighte-labs/spark-web/pull/113)
191
+ [`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)
192
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
193
+ dependencies
194
+
195
+ - Updated dependencies
196
+ [[`08752c3`](https://github.com/brighte-labs/spark-web/commit/08752c350b53cde0657ec32f03f9932dec835e33),
197
+ [`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)]:
198
+ - @spark-web/a11y@1.0.5
199
+ - @spark-web/box@1.0.5
200
+ - @spark-web/icon@1.1.3
201
+ - @spark-web/stack@1.0.5
202
+ - @spark-web/text@1.0.5
203
+ - @spark-web/theme@3.0.1
204
+ - @spark-web/utils@1.1.3
205
+
206
+ ## 1.1.0
207
+
208
+ ### Minor Changes
209
+
210
+ - [#50](https://github.com/brighte-labs/spark-web/pull/50)
211
+ [`60372d0`](https://github.com/brighte-labs/spark-web/commit/60372d0538fe5e141c8dabc1b20c8e09d1f56c70)
212
+ Thanks [@justinfaynhan](https://github.com/justinfaynhan)! - Added new
213
+ currency input component. Some changes have been made to its underlying base
214
+ textinput component to provide functionality to accomodate the adornments, in
215
+ this case, a starting adornment currency symbol.
216
+
217
+ ### Patch Changes
218
+
219
+ - [#65](https://github.com/brighte-labs/spark-web/pull/65)
220
+ [`182a53a`](https://github.com/brighte-labs/spark-web/commit/182a53a484892df48754e89dd714459a7f69fcff)
221
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Remove "Inter"
222
+ font, change font-weights and font-sizes.
223
+
224
+ * [#52](https://github.com/brighte-labs/spark-web/pull/52)
225
+ [`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e)
226
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add files array
227
+ to package.json files
228
+
229
+ * Updated dependencies
230
+ [[`1ef4f82`](https://github.com/brighte-labs/spark-web/commit/1ef4f82df999c487b79cd216c17ca5735e444fc5),
231
+ [`182a53a`](https://github.com/brighte-labs/spark-web/commit/182a53a484892df48754e89dd714459a7f69fcff),
232
+ [`5744b68`](https://github.com/brighte-labs/spark-web/commit/5744b6820f626b93a14e11e1fbd96bcbe1b12b27),
233
+ [`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e),
234
+ [`df618d9`](https://github.com/brighte-labs/spark-web/commit/df618d92d534e06f06ecedc95ea6bdd51cdc906b)]:
235
+ - @spark-web/text@1.0.4
236
+ - @spark-web/theme@3.0.0
237
+ - @spark-web/stack@1.0.4
238
+ - @spark-web/a11y@1.0.4
239
+ - @spark-web/box@1.0.4
240
+ - @spark-web/icon@1.1.2
241
+ - @spark-web/utils@1.1.2
242
+
243
+ ## 1.0.3
244
+
245
+ ### Patch Changes
246
+
247
+ - [#42](https://github.com/brighte-labs/spark-web/pull/42)
248
+ [`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)
249
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Prevent multiple
250
+ versions of React
251
+
252
+ - Updated dependencies
253
+ [[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)]:
254
+ - @spark-web/a11y@1.0.3
255
+ - @spark-web/box@1.0.3
256
+ - @spark-web/icon@1.1.1
257
+ - @spark-web/stack@1.0.3
258
+ - @spark-web/text@1.0.3
259
+ - @spark-web/theme@2.0.2
260
+ - @spark-web/utils@1.1.1
261
+
262
+ ## 1.0.2
263
+
264
+ ### Patch Changes
265
+
266
+ - [#40](https://github.com/brighte-labs/spark-web/pull/40)
267
+ [`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
268
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
269
+ @babel/transform-runtime
270
+
271
+ - Updated dependencies
272
+ [[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
273
+ - @spark-web/a11y@1.0.2
274
+ - @spark-web/box@1.0.2
275
+ - @spark-web/icon@1.0.2
276
+ - @spark-web/stack@1.0.2
277
+ - @spark-web/text@1.0.2
278
+ - @spark-web/theme@2.0.1
279
+ - @spark-web/utils@1.0.2
280
+
281
+ ## 1.0.1
282
+
283
+ ### Patch Changes
284
+
285
+ - [#36](https://github.com/brighte-labs/spark-web/pull/36)
286
+ [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
287
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
288
+ config
289
+
290
+ - Updated dependencies
291
+ [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
292
+ [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
293
+ - @spark-web/theme@2.0.0
294
+ - @spark-web/a11y@1.0.1
295
+ - @spark-web/box@1.0.1
296
+ - @spark-web/icon@1.0.1
297
+ - @spark-web/stack@1.0.1
298
+ - @spark-web/text@1.0.1
299
+ - @spark-web/utils@1.0.1
300
+
301
+ ## 1.0.0
302
+
303
+ ### Major Changes
304
+
305
+ - [#27](https://github.com/brighte-labs/spark-web/pull/27)
306
+ [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
307
+ Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
308
+
309
+ ### Patch Changes
310
+
311
+ - Updated dependencies
312
+ [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
313
+ - @spark-web/a11y@1.0.0
314
+ - @spark-web/box@1.0.0
315
+ - @spark-web/icon@1.0.0
316
+ - @spark-web/stack@1.0.0
317
+ - @spark-web/text@1.0.0
318
+ - @spark-web/theme@1.0.0
319
+ - @spark-web/utils@1.0.0
package/README.md CHANGED
@@ -126,19 +126,7 @@ Mark the field as disabled by passing true to the disabled prop.
126
126
 
127
127
  ## Props
128
128
 
129
- | Prop | Type | Default | Description |
130
- | ---------------- | ---------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
131
- | id? | string | | Sets a unique identifier for the component. |
132
- | data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
133
- | adornment? | React.ReactElement | | Optionally provide a utility or contextual hint, related to the field. |
134
- | children | React.ReactNode | | Children elements to be rendered within the component. Expected to be Input elements. |
135
- | disabled? | boolean | | Indicates that the field is perceivable but disabled, so it is not editable or otherwise operable. |
136
- | description? | string | | Sets a description for the field to provide additional information that will aid user input. |
137
- | label | string | | Sets a label for the field. |
138
- | labelVisibility? | 'hidden' \| 'reserve-space' \| 'visible' | 'visible' | The label must always be provided for assistive technology, but you may hide it from sighted users when the intent can be inferred from context. |
139
- | message? | string | | Provide a message, informing the user about changes in state. |
140
- | secondaryLabel? | string | | Provides additional context, typically used to indicate that the field is optional. |
141
- | tone? | 'critical' \| 'neutral' \| 'positive' | 'neutral' | Provide a tone to influence elements of the field, and its input. |
129
+ <PropsTable displayName="Field" />
142
130
 
143
131
  [data-attribute-map]:
144
132
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
package/dist/declarations/src/{Field.d.ts → field.d.ts} RENAMED
@@ -2,7 +2,9 @@ import type { DataAttributeMap } from '@spark-web/utils/internal';
2
2
  import type { ReactElement, ReactNode } from 'react';
3
3
  export declare type Tone = keyof typeof messageToneMap;
4
4
  export declare type FieldProps = {
5
+ /** Sets a unique identifier for the component. */
5
6
  id?: string;
7
+ /** Sets data attributes on the component. */
6
8
  data?: DataAttributeMap;
7
9
  /** Optionally provide a utility or contextual hint, related to the field. */
8
10
  adornment?: ReactElement;
package/dist/declarations/src/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { FieldContextProvider, useFieldContext } from './context';
2
- export { Field, FieldMessage, useFieldIds } from './Field';
2
+ export { Field, FieldMessage, useFieldIds } from './field';
3
3
  export type { FieldContextType, FieldState, InputPropsDerivedFromField, } from './context';
4
- export type { FieldProps, Tone } from './Field';
4
+ export type { FieldProps, Tone } from './field';
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,18 +173,13 @@ var FieldMessage = function FieldMessage(_ref3) {
173
173
  })]
174
174
  });
175
175
  };
176
-
177
176
  function IndicatorContainer(_ref4) {
178
177
  var children = _ref4.children;
179
-
180
- var _useTheme = theme.useTheme(),
181
- typography = _useTheme.typography,
182
- utils = _useTheme.utils;
183
-
184
- var _typography$text$smal = typography.text.small,
185
- mobile = _typography$text$smal.mobile,
186
- tablet = _typography$text$smal.tablet;
187
- var responsiveStyles = utils.responsiveStyles({
178
+ var theme$1 = theme.useTheme();
179
+ var _theme$typography$tex = theme$1.typography.text.small,
180
+ mobile = _theme$typography$tex.mobile,
181
+ tablet = _theme$typography$tex.tablet;
182
+ var responsiveStyles = theme$1.utils.responsiveStyles({
188
183
  mobile: {
189
184
  height: mobile.capHeight
190
185
  },
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,18 +173,13 @@ var FieldMessage = function FieldMessage(_ref3) {
173
173
  })]
174
174
  });
175
175
  };
176
-
177
176
  function IndicatorContainer(_ref4) {
178
177
  var children = _ref4.children;
179
-
180
- var _useTheme = theme.useTheme(),
181
- typography = _useTheme.typography,
182
- utils = _useTheme.utils;
183
-
184
- var _typography$text$smal = typography.text.small,
185
- mobile = _typography$text$smal.mobile,
186
- tablet = _typography$text$smal.tablet;
187
- var responsiveStyles = utils.responsiveStyles({
178
+ var theme$1 = theme.useTheme();
179
+ var _theme$typography$tex = theme$1.typography.text.small,
180
+ mobile = _theme$typography$tex.mobile,
181
+ tablet = _theme$typography$tex.tablet;
182
+ var responsiveStyles = theme$1.utils.responsiveStyles({
188
183
  mobile: {
189
184
  height: mobile.capHeight
190
185
  },
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,18 +169,13 @@ var FieldMessage = function FieldMessage(_ref3) {
169
169
  })]
170
170
  });
171
171
  };
172
-
173
172
  function IndicatorContainer(_ref4) {
174
173
  var children = _ref4.children;
175
-
176
- var _useTheme = useTheme(),
177
- typography = _useTheme.typography,
178
- utils = _useTheme.utils;
179
-
180
- var _typography$text$smal = typography.text.small,
181
- mobile = _typography$text$smal.mobile,
182
- tablet = _typography$text$smal.tablet;
183
- var responsiveStyles = utils.responsiveStyles({
174
+ var theme = useTheme();
175
+ var _theme$typography$tex = theme.typography.text.small,
176
+ mobile = _theme$typography$tex.mobile,
177
+ tablet = _theme$typography$tex.tablet;
178
+ var responsiveStyles = theme.utils.responsiveStyles({
184
179
  mobile: {
185
180
  height: mobile.capHeight
186
181
  },
package/package.json CHANGED
@@ -1,26 +1,33 @@
1
1
  {
2
2
  "name": "@spark-web/field",
3
- "version": "3.0.5",
4
- "license": "MIT",
3
+ "version": "3.1.0",
4
+ "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/brighte-labs/spark-web.git",
8
+ "directory": "packages/field"
9
+ },
5
10
  "main": "dist/spark-web-field.cjs.js",
6
11
  "module": "dist/spark-web-field.esm.js",
7
12
  "files": [
8
- "dist"
13
+ "CHANGELOG.md",
14
+ "dist",
15
+ "README.md"
9
16
  ],
10
17
  "dependencies": {
11
- "@babel/runtime": "^7.18.9",
18
+ "@babel/runtime": "^7.19.0",
12
19
  "@emotion/css": "^11.9.0",
13
- "@spark-web/a11y": "^1.3.1",
14
- "@spark-web/box": "^1.0.9",
15
- "@spark-web/icon": "^1.2.1",
16
- "@spark-web/stack": "^1.0.9",
17
- "@spark-web/text": "^1.1.1",
18
- "@spark-web/theme": "^3.0.6",
19
- "@spark-web/utils": "^1.2.2"
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"
20
27
  },
21
28
  "devDependencies": {
22
- "@types/react": "^17.0.12",
23
- "react": "^17.0.2"
29
+ "@types/react": "^18.2.0",
30
+ "react": "^18.2.0"
24
31
  },
25
32
  "peerDependencies": {
26
33
  "react": ">=17.0.2"