@charcoal-ui/react 4.3.0 → 4.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.
Files changed (40) hide show
  1. package/dist/components/MultiSelect/context.d.ts +14 -0
  2. package/dist/components/MultiSelect/context.d.ts.map +1 -0
  3. package/dist/components/MultiSelect/index.d.ts +38 -0
  4. package/dist/components/MultiSelect/index.d.ts.map +1 -0
  5. package/dist/index.cjs.js +318 -216
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.css +111 -0
  8. package/dist/index.css.map +1 -1
  9. package/dist/index.d.ts +1 -0
  10. package/dist/index.d.ts.map +1 -1
  11. package/dist/index.esm.js +281 -181
  12. package/dist/index.esm.js.map +1 -1
  13. package/dist/layered.css +111 -0
  14. package/dist/layered.css.map +1 -1
  15. package/package.json +6 -7
  16. package/src/components/Button/__snapshots__/index.story.storyshot +89 -71
  17. package/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot +50 -53
  18. package/src/components/Checkbox/__snapshots__/index.story.storyshot +108 -102
  19. package/src/components/Clickable/__snapshots__/index.story.storyshot +19 -17
  20. package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot +45 -54
  21. package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot +238 -275
  22. package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot +28 -50
  23. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +780 -1158
  24. package/src/components/Icon/__snapshots__/index.story.storyshot +9 -7
  25. package/src/components/IconButton/__snapshots__/index.story.storyshot +43 -37
  26. package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot +52 -64
  27. package/src/components/Modal/__snapshots__/index.story.storyshot +568 -716
  28. package/src/components/MultiSelect/__snapshots__/index.story.storyshot +531 -0
  29. package/src/components/MultiSelect/context.ts +23 -0
  30. package/src/components/MultiSelect/index.css +139 -0
  31. package/src/components/MultiSelect/index.story.tsx +118 -0
  32. package/src/components/MultiSelect/index.test.tsx +255 -0
  33. package/src/components/MultiSelect/index.tsx +153 -0
  34. package/src/components/Radio/__snapshots__/index.story.storyshot +313 -367
  35. package/src/components/SegmentedControl/__snapshots__/index.story.storyshot +116 -228
  36. package/src/components/Switch/__snapshots__/index.story.storyshot +74 -73
  37. package/src/components/TagItem/__snapshots__/index.story.storyshot +177 -193
  38. package/src/components/TextArea/__snapshots__/TextArea.story.storyshot +372 -533
  39. package/src/components/TextField/__snapshots__/TextField.story.storyshot +444 -583
  40. package/src/index.ts +6 -0
package/src/components/Radio/__snapshots__/index.story.storyshot CHANGED
@@ -1,437 +1,383 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/Radio > Default 1`] = `
4
- <div
5
- data-dark={false}
6
- >
4
+ <div>
7
5
  <div
8
- style={
9
- Object {
10
- "display": "flex",
11
- "flexDirection": "column",
12
- "gap": 24,
13
- }
14
- }
6
+ data-dark="false"
15
7
  >
16
8
  <div
17
- aria-label="default story"
18
- aria-orientation="vertical"
19
- className="charcoal-radio-group"
20
- role="radiogroup"
9
+ style="display: flex; flex-direction: column; gap: 24px;"
21
10
  >
22
- <label
23
- aria-disabled={false}
24
- className="charcoal-radio__label"
11
+ <div
12
+ aria-label="default story"
13
+ aria-orientation="vertical"
14
+ class="charcoal-radio-group"
15
+ role="radiogroup"
25
16
  >
26
- <input
27
- aria-invalid={false}
28
- checked={true}
29
- className="charcoal-radio-input"
30
- disabled={false}
31
- name="default_story"
32
- onChange={[Function]}
33
- type="radio"
34
- value="1"
35
- />
36
- <div
37
- className="charcoal-radio__label_div"
17
+ <label
18
+ aria-disabled="false"
19
+ class="charcoal-radio__label"
38
20
  >
39
- Value
40
- 1
41
- </div>
42
- </label>
43
- <label
44
- aria-disabled={false}
45
- className="charcoal-radio__label"
46
- >
47
- <input
48
- aria-invalid={false}
49
- checked={false}
50
- className="charcoal-radio-input"
51
- disabled={false}
52
- name="default_story"
53
- onChange={[Function]}
54
- type="radio"
55
- value="2"
56
- />
57
- <div
58
- className="charcoal-radio__label_div"
21
+ <input
22
+ aria-invalid="false"
23
+ checked=""
24
+ class="charcoal-radio-input"
25
+ name="default_story"
26
+ type="radio"
27
+ value="1"
28
+ />
29
+ <div
30
+ class="charcoal-radio__label_div"
31
+ >
32
+ Value
33
+ 1
34
+ </div>
35
+ </label>
36
+ <label
37
+ aria-disabled="false"
38
+ class="charcoal-radio__label"
59
39
  >
60
- Value
61
- 2
62
- </div>
63
- </label>
64
- <label
65
- aria-disabled={false}
66
- className="charcoal-radio__label"
67
- >
68
- <input
69
- aria-invalid={false}
70
- checked={false}
71
- className="charcoal-radio-input"
72
- disabled={false}
73
- name="default_story"
74
- onChange={[Function]}
75
- type="radio"
76
- value="3"
77
- />
78
- <div
79
- className="charcoal-radio__label_div"
40
+ <input
41
+ aria-invalid="false"
42
+ class="charcoal-radio-input"
43
+ name="default_story"
44
+ type="radio"
45
+ value="2"
46
+ />
47
+ <div
48
+ class="charcoal-radio__label_div"
49
+ >
50
+ Value
51
+ 2
52
+ </div>
53
+ </label>
54
+ <label
55
+ aria-disabled="false"
56
+ class="charcoal-radio__label"
80
57
  >
81
- Value
82
- 3
83
- </div>
84
- </label>
58
+ <input
59
+ aria-invalid="false"
60
+ class="charcoal-radio-input"
61
+ name="default_story"
62
+ type="radio"
63
+ value="3"
64
+ />
65
+ <div
66
+ class="charcoal-radio__label_div"
67
+ >
68
+ Value
69
+ 3
70
+ </div>
71
+ </label>
72
+ </div>
85
73
  </div>
86
74
  </div>
87
75
  </div>
88
76
  `;
89
77
 
90
78
  exports[`Storybook Tests > react/Radio > Disabled 1`] = `
91
- <div
92
- data-dark={false}
93
- >
79
+ <div>
94
80
  <div
95
- style={
96
- Object {
97
- "display": "flex",
98
- "flexDirection": "column",
99
- "gap": 24,
100
- }
101
- }
81
+ data-dark="false"
102
82
  >
103
83
  <div
104
- aria-disabled={true}
105
- aria-label="disabled_stroy"
106
- aria-orientation="vertical"
107
- className="charcoal-radio-group"
108
- role="radiogroup"
84
+ style="display: flex; flex-direction: column; gap: 24px;"
109
85
  >
110
- <label
111
- aria-disabled={true}
112
- className="charcoal-radio__label"
86
+ <div
87
+ aria-disabled="true"
88
+ aria-label="disabled_stroy"
89
+ aria-orientation="vertical"
90
+ class="charcoal-radio-group"
91
+ role="radiogroup"
113
92
  >
114
- <input
115
- aria-invalid={false}
116
- checked={true}
117
- className="charcoal-radio-input"
118
- disabled={true}
119
- name="disabled story"
120
- onChange={[Function]}
121
- type="radio"
122
- value="1"
123
- />
124
- <div
125
- className="charcoal-radio__label_div"
93
+ <label
94
+ aria-disabled="true"
95
+ class="charcoal-radio__label"
126
96
  >
127
- Value
128
- 1
129
- </div>
130
- </label>
131
- <label
132
- aria-disabled={true}
133
- className="charcoal-radio__label"
134
- >
135
- <input
136
- aria-invalid={false}
137
- checked={false}
138
- className="charcoal-radio-input"
139
- disabled={true}
140
- name="disabled story"
141
- onChange={[Function]}
142
- type="radio"
143
- value="2"
144
- />
145
- <div
146
- className="charcoal-radio__label_div"
97
+ <input
98
+ aria-invalid="false"
99
+ checked=""
100
+ class="charcoal-radio-input"
101
+ disabled=""
102
+ name="disabled story"
103
+ type="radio"
104
+ value="1"
105
+ />
106
+ <div
107
+ class="charcoal-radio__label_div"
108
+ >
109
+ Value
110
+ 1
111
+ </div>
112
+ </label>
113
+ <label
114
+ aria-disabled="true"
115
+ class="charcoal-radio__label"
147
116
  >
148
- Value
149
- 2
150
- </div>
151
- </label>
152
- <label
153
- aria-disabled={true}
154
- className="charcoal-radio__label"
155
- >
156
- <input
157
- aria-invalid={false}
158
- checked={false}
159
- className="charcoal-radio-input"
160
- disabled={true}
161
- name="disabled story"
162
- onChange={[Function]}
163
- type="radio"
164
- value="3"
165
- />
166
- <div
167
- className="charcoal-radio__label_div"
117
+ <input
118
+ aria-invalid="false"
119
+ class="charcoal-radio-input"
120
+ disabled=""
121
+ name="disabled story"
122
+ type="radio"
123
+ value="2"
124
+ />
125
+ <div
126
+ class="charcoal-radio__label_div"
127
+ >
128
+ Value
129
+ 2
130
+ </div>
131
+ </label>
132
+ <label
133
+ aria-disabled="true"
134
+ class="charcoal-radio__label"
168
135
  >
169
- Value
170
- 3
171
- </div>
172
- </label>
136
+ <input
137
+ aria-invalid="false"
138
+ class="charcoal-radio-input"
139
+ disabled=""
140
+ name="disabled story"
141
+ type="radio"
142
+ value="3"
143
+ />
144
+ <div
145
+ class="charcoal-radio__label_div"
146
+ >
147
+ Value
148
+ 3
149
+ </div>
150
+ </label>
151
+ </div>
173
152
  </div>
174
153
  </div>
175
154
  </div>
176
155
  `;
177
156
 
178
157
  exports[`Storybook Tests > react/Radio > Invalid 1`] = `
179
- <div
180
- data-dark={false}
181
- >
158
+ <div>
182
159
  <div
183
- style={
184
- Object {
185
- "display": "flex",
186
- "flexDirection": "column",
187
- "gap": 24,
188
- }
189
- }
160
+ data-dark="false"
190
161
  >
191
162
  <div
192
- aria-invalid={true}
193
- aria-label="invalid story"
194
- aria-orientation="vertical"
195
- className="charcoal-radio-group"
196
- role="radiogroup"
163
+ style="display: flex; flex-direction: column; gap: 24px;"
197
164
  >
198
- <label
199
- aria-disabled={false}
200
- className="charcoal-radio__label"
165
+ <div
166
+ aria-invalid="true"
167
+ aria-label="invalid story"
168
+ aria-orientation="vertical"
169
+ class="charcoal-radio-group"
170
+ role="radiogroup"
201
171
  >
202
- <input
203
- aria-invalid={true}
204
- checked={true}
205
- className="charcoal-radio-input"
206
- disabled={false}
207
- name="invalid_story"
208
- onChange={[Function]}
209
- type="radio"
210
- value="1"
211
- />
212
- <div
213
- className="charcoal-radio__label_div"
172
+ <label
173
+ aria-disabled="false"
174
+ class="charcoal-radio__label"
214
175
  >
215
- Value
216
- 1
217
- </div>
218
- </label>
219
- <label
220
- aria-disabled={false}
221
- className="charcoal-radio__label"
222
- >
223
- <input
224
- aria-invalid={true}
225
- checked={false}
226
- className="charcoal-radio-input"
227
- disabled={false}
228
- name="invalid_story"
229
- onChange={[Function]}
230
- type="radio"
231
- value="2"
232
- />
233
- <div
234
- className="charcoal-radio__label_div"
176
+ <input
177
+ aria-invalid="true"
178
+ checked=""
179
+ class="charcoal-radio-input"
180
+ name="invalid_story"
181
+ type="radio"
182
+ value="1"
183
+ />
184
+ <div
185
+ class="charcoal-radio__label_div"
186
+ >
187
+ Value
188
+ 1
189
+ </div>
190
+ </label>
191
+ <label
192
+ aria-disabled="false"
193
+ class="charcoal-radio__label"
235
194
  >
236
- Value
237
- 2
238
- </div>
239
- </label>
240
- <label
241
- aria-disabled={false}
242
- className="charcoal-radio__label"
243
- >
244
- <input
245
- aria-invalid={true}
246
- checked={false}
247
- className="charcoal-radio-input"
248
- disabled={false}
249
- name="invalid_story"
250
- onChange={[Function]}
251
- type="radio"
252
- value="3"
253
- />
254
- <div
255
- className="charcoal-radio__label_div"
195
+ <input
196
+ aria-invalid="true"
197
+ class="charcoal-radio-input"
198
+ name="invalid_story"
199
+ type="radio"
200
+ value="2"
201
+ />
202
+ <div
203
+ class="charcoal-radio__label_div"
204
+ >
205
+ Value
206
+ 2
207
+ </div>
208
+ </label>
209
+ <label
210
+ aria-disabled="false"
211
+ class="charcoal-radio__label"
256
212
  >
257
- Value
258
- 3
259
- </div>
260
- </label>
213
+ <input
214
+ aria-invalid="true"
215
+ class="charcoal-radio-input"
216
+ name="invalid_story"
217
+ type="radio"
218
+ value="3"
219
+ />
220
+ <div
221
+ class="charcoal-radio__label_div"
222
+ >
223
+ Value
224
+ 3
225
+ </div>
226
+ </label>
227
+ </div>
261
228
  </div>
262
229
  </div>
263
230
  </div>
264
231
  `;
265
232
 
266
233
  exports[`Storybook Tests > react/Radio > PartialDisabled 1`] = `
267
- <div
268
- data-dark={false}
269
- >
234
+ <div>
270
235
  <div
271
- style={
272
- Object {
273
- "display": "flex",
274
- "flexDirection": "column",
275
- "gap": 24,
276
- }
277
- }
236
+ data-dark="false"
278
237
  >
279
238
  <div
280
- aria-label="partial disabled story"
281
- aria-orientation="vertical"
282
- className="charcoal-radio-group"
283
- role="radiogroup"
239
+ style="display: flex; flex-direction: column; gap: 24px;"
284
240
  >
285
- <label
286
- aria-disabled={false}
287
- className="charcoal-radio__label"
241
+ <div
242
+ aria-label="partial disabled story"
243
+ aria-orientation="vertical"
244
+ class="charcoal-radio-group"
245
+ role="radiogroup"
288
246
  >
289
- <input
290
- aria-invalid={false}
291
- checked={true}
292
- className="charcoal-radio-input"
293
- disabled={false}
294
- name="partial_disabled_story"
295
- onChange={[Function]}
296
- type="radio"
297
- value="1"
298
- />
299
- <div
300
- className="charcoal-radio__label_div"
247
+ <label
248
+ aria-disabled="false"
249
+ class="charcoal-radio__label"
301
250
  >
302
- Value
303
- 1
304
- </div>
305
- </label>
306
- <label
307
- aria-disabled={true}
308
- className="charcoal-radio__label"
309
- >
310
- <input
311
- aria-invalid={false}
312
- checked={false}
313
- className="charcoal-radio-input"
314
- disabled={true}
315
- name="partial_disabled_story"
316
- onChange={[Function]}
317
- type="radio"
318
- value="2"
319
- />
320
- <div
321
- className="charcoal-radio__label_div"
251
+ <input
252
+ aria-invalid="false"
253
+ checked=""
254
+ class="charcoal-radio-input"
255
+ name="partial_disabled_story"
256
+ type="radio"
257
+ value="1"
258
+ />
259
+ <div
260
+ class="charcoal-radio__label_div"
261
+ >
262
+ Value
263
+ 1
264
+ </div>
265
+ </label>
266
+ <label
267
+ aria-disabled="true"
268
+ class="charcoal-radio__label"
322
269
  >
323
- Value
324
- 2
325
- </div>
326
- </label>
327
- <label
328
- aria-disabled={false}
329
- className="charcoal-radio__label"
330
- >
331
- <input
332
- aria-invalid={false}
333
- checked={false}
334
- className="charcoal-radio-input"
335
- disabled={false}
336
- name="partial_disabled_story"
337
- onChange={[Function]}
338
- type="radio"
339
- value="3"
340
- />
341
- <div
342
- className="charcoal-radio__label_div"
270
+ <input
271
+ aria-invalid="false"
272
+ class="charcoal-radio-input"
273
+ disabled=""
274
+ name="partial_disabled_story"
275
+ type="radio"
276
+ value="2"
277
+ />
278
+ <div
279
+ class="charcoal-radio__label_div"
280
+ >
281
+ Value
282
+ 2
283
+ </div>
284
+ </label>
285
+ <label
286
+ aria-disabled="false"
287
+ class="charcoal-radio__label"
343
288
  >
344
- Value
345
- 3
346
- </div>
347
- </label>
289
+ <input
290
+ aria-invalid="false"
291
+ class="charcoal-radio-input"
292
+ name="partial_disabled_story"
293
+ type="radio"
294
+ value="3"
295
+ />
296
+ <div
297
+ class="charcoal-radio__label_div"
298
+ >
299
+ Value
300
+ 3
301
+ </div>
302
+ </label>
303
+ </div>
348
304
  </div>
349
305
  </div>
350
306
  </div>
351
307
  `;
352
308
 
353
309
  exports[`Storybook Tests > react/Radio > Readonly 1`] = `
354
- <div
355
- data-dark={false}
356
- >
310
+ <div>
357
311
  <div
358
- style={
359
- Object {
360
- "display": "flex",
361
- "flexDirection": "column",
362
- "gap": 24,
363
- }
364
- }
312
+ data-dark="false"
365
313
  >
366
314
  <div
367
- aria-label="readonly story"
368
- aria-orientation="vertical"
369
- className="charcoal-radio-group"
370
- role="radiogroup"
315
+ style="display: flex; flex-direction: column; gap: 24px;"
371
316
  >
372
- <label
373
- aria-disabled={false}
374
- className="charcoal-radio__label"
317
+ <div
318
+ aria-label="readonly story"
319
+ aria-orientation="vertical"
320
+ class="charcoal-radio-group"
321
+ role="radiogroup"
375
322
  >
376
- <input
377
- aria-invalid={false}
378
- checked={true}
379
- className="charcoal-radio-input"
380
- disabled={false}
381
- name="readonly_story"
382
- onChange={[Function]}
383
- type="radio"
384
- value="1"
385
- />
386
- <div
387
- className="charcoal-radio__label_div"
323
+ <label
324
+ aria-disabled="false"
325
+ class="charcoal-radio__label"
388
326
  >
389
- Value
390
- 1
391
- </div>
392
- </label>
393
- <label
394
- aria-disabled={true}
395
- className="charcoal-radio__label"
396
- >
397
- <input
398
- aria-invalid={false}
399
- checked={false}
400
- className="charcoal-radio-input"
401
- disabled={true}
402
- name="readonly_story"
403
- onChange={[Function]}
404
- type="radio"
405
- value="2"
406
- />
407
- <div
408
- className="charcoal-radio__label_div"
327
+ <input
328
+ aria-invalid="false"
329
+ checked=""
330
+ class="charcoal-radio-input"
331
+ name="readonly_story"
332
+ type="radio"
333
+ value="1"
334
+ />
335
+ <div
336
+ class="charcoal-radio__label_div"
337
+ >
338
+ Value
339
+ 1
340
+ </div>
341
+ </label>
342
+ <label
343
+ aria-disabled="true"
344
+ class="charcoal-radio__label"
409
345
  >
410
- Value
411
- 2
412
- </div>
413
- </label>
414
- <label
415
- aria-disabled={true}
416
- className="charcoal-radio__label"
417
- >
418
- <input
419
- aria-invalid={false}
420
- checked={false}
421
- className="charcoal-radio-input"
422
- disabled={true}
423
- name="readonly_story"
424
- onChange={[Function]}
425
- type="radio"
426
- value="3"
427
- />
428
- <div
429
- className="charcoal-radio__label_div"
346
+ <input
347
+ aria-invalid="false"
348
+ class="charcoal-radio-input"
349
+ disabled=""
350
+ name="readonly_story"
351
+ type="radio"
352
+ value="2"
353
+ />
354
+ <div
355
+ class="charcoal-radio__label_div"
356
+ >
357
+ Value
358
+ 2
359
+ </div>
360
+ </label>
361
+ <label
362
+ aria-disabled="true"
363
+ class="charcoal-radio__label"
430
364
  >
431
- Value
432
- 3
433
- </div>
434
- </label>
365
+ <input
366
+ aria-invalid="false"
367
+ class="charcoal-radio-input"
368
+ disabled=""
369
+ name="readonly_story"
370
+ type="radio"
371
+ value="3"
372
+ />
373
+ <div
374
+ class="charcoal-radio__label_div"
375
+ >
376
+ Value
377
+ 3
378
+ </div>
379
+ </label>
380
+ </div>
435
381
  </div>
436
382
  </div>
437
383
  </div>