@charcoal-ui/react 4.3.0-beta.5 → 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/DropdownSelector/MenuList/__snapshots__/index.story.storyshot CHANGED
@@ -1,298 +1,261 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/internals/MenuList > Basic 1`] = `
4
- <div
5
- data-dark={false}
6
- >
7
- <ul
8
- className="charcoal-menu-list"
4
+ <div>
5
+ <div
6
+ data-dark="false"
9
7
  >
10
- <li
11
- className="charcoal-list-item"
12
- data-key="0"
13
- onClick={[Function]}
14
- onKeyDown={[Function]}
15
- role="option"
16
- tabIndex={-1}
8
+ <ul
9
+ class="charcoal-menu-list"
17
10
  >
18
- Menu
19
- 0
20
- </li>
21
- <li
22
- className="charcoal-list-item"
23
- data-key="1"
24
- onClick={[Function]}
25
- onKeyDown={[Function]}
26
- role="option"
27
- tabIndex={-1}
28
- >
29
- Menu
30
- 1
31
- </li>
32
- <li
33
- className="charcoal-list-item"
34
- data-key="2"
35
- onClick={[Function]}
36
- onKeyDown={[Function]}
37
- role="option"
38
- tabIndex={-1}
39
- >
40
- Menu
41
- 2
42
- </li>
43
- <li
44
- className="charcoal-list-item"
45
- data-key="3"
46
- onClick={[Function]}
47
- onKeyDown={[Function]}
48
- role="option"
49
- tabIndex={-1}
50
- >
51
- Menu
52
- 3
53
- </li>
54
- <li
55
- className="charcoal-list-item"
56
- data-key="4"
57
- onClick={[Function]}
58
- onKeyDown={[Function]}
59
- role="option"
60
- tabIndex={-1}
61
- >
62
- Menu
63
- 4
64
- </li>
65
- <li
66
- className="charcoal-list-item"
67
- data-key="5"
68
- onClick={[Function]}
69
- onKeyDown={[Function]}
70
- role="option"
71
- tabIndex={-1}
72
- >
73
- Menu
74
- 5
75
- </li>
76
- <li
77
- className="charcoal-list-item"
78
- data-key="6"
79
- onClick={[Function]}
80
- onKeyDown={[Function]}
81
- role="option"
82
- tabIndex={-1}
83
- >
84
- Menu
85
- 6
86
- </li>
87
- <li
88
- className="charcoal-list-item"
89
- data-key="7"
90
- onClick={[Function]}
91
- onKeyDown={[Function]}
92
- role="option"
93
- tabIndex={-1}
94
- >
95
- Menu
96
- 7
97
- </li>
98
- <li
99
- className="charcoal-list-item"
100
- data-key="8"
101
- onClick={[Function]}
102
- onKeyDown={[Function]}
103
- role="option"
104
- tabIndex={-1}
105
- >
106
- Menu
107
- 8
108
- </li>
109
- <li
110
- className="charcoal-list-item"
111
- data-key="9"
112
- onClick={[Function]}
113
- onKeyDown={[Function]}
114
- role="option"
115
- tabIndex={-1}
116
- >
117
- Menu
118
- 9
119
- </li>
120
- </ul>
11
+ <li
12
+ class="charcoal-list-item"
13
+ data-key="0"
14
+ role="option"
15
+ tabindex="-1"
16
+ >
17
+ Menu
18
+ 0
19
+ </li>
20
+ <li
21
+ class="charcoal-list-item"
22
+ data-key="1"
23
+ role="option"
24
+ tabindex="-1"
25
+ >
26
+ Menu
27
+ 1
28
+ </li>
29
+ <li
30
+ class="charcoal-list-item"
31
+ data-key="2"
32
+ role="option"
33
+ tabindex="-1"
34
+ >
35
+ Menu
36
+ 2
37
+ </li>
38
+ <li
39
+ class="charcoal-list-item"
40
+ data-key="3"
41
+ role="option"
42
+ tabindex="-1"
43
+ >
44
+ Menu
45
+ 3
46
+ </li>
47
+ <li
48
+ class="charcoal-list-item"
49
+ data-key="4"
50
+ role="option"
51
+ tabindex="-1"
52
+ >
53
+ Menu
54
+ 4
55
+ </li>
56
+ <li
57
+ class="charcoal-list-item"
58
+ data-key="5"
59
+ role="option"
60
+ tabindex="-1"
61
+ >
62
+ Menu
63
+ 5
64
+ </li>
65
+ <li
66
+ class="charcoal-list-item"
67
+ data-key="6"
68
+ role="option"
69
+ tabindex="-1"
70
+ >
71
+ Menu
72
+ 6
73
+ </li>
74
+ <li
75
+ class="charcoal-list-item"
76
+ data-key="7"
77
+ role="option"
78
+ tabindex="-1"
79
+ >
80
+ Menu
81
+ 7
82
+ </li>
83
+ <li
84
+ class="charcoal-list-item"
85
+ data-key="8"
86
+ role="option"
87
+ tabindex="-1"
88
+ >
89
+ Menu
90
+ 8
91
+ </li>
92
+ <li
93
+ class="charcoal-list-item"
94
+ data-key="9"
95
+ role="option"
96
+ tabindex="-1"
97
+ >
98
+ Menu
99
+ 9
100
+ </li>
101
+ </ul>
102
+ </div>
121
103
  </div>
122
104
  `;
123
105
 
124
106
  exports[`Storybook Tests > react/internals/MenuList > Disabled 1`] = `
125
- <div
126
- data-dark={false}
127
- >
128
- <ul
129
- className="charcoal-menu-list"
107
+ <div>
108
+ <div
109
+ data-dark="false"
130
110
  >
131
- <li
132
- className="charcoal-list-item"
133
- data-key="1"
134
- onClick={[Function]}
135
- onKeyDown={[Function]}
136
- role="option"
137
- tabIndex={-1}
138
- >
139
- MenuItem
140
- </li>
141
- <li
142
- aria-disabled={true}
143
- className="charcoal-list-item"
144
- data-key="2"
145
- onKeyDown={[Function]}
146
- role="option"
147
- tabIndex={-1}
111
+ <ul
112
+ class="charcoal-menu-list"
148
113
  >
149
- Disabled MenuItem
150
- </li>
151
- </ul>
114
+ <li
115
+ class="charcoal-list-item"
116
+ data-key="1"
117
+ role="option"
118
+ tabindex="-1"
119
+ >
120
+ MenuItem
121
+ </li>
122
+ <li
123
+ aria-disabled="true"
124
+ class="charcoal-list-item"
125
+ data-key="2"
126
+ role="option"
127
+ tabindex="-1"
128
+ >
129
+ Disabled MenuItem
130
+ </li>
131
+ </ul>
132
+ </div>
152
133
  </div>
153
134
  `;
154
135
 
155
136
  exports[`Storybook Tests > react/internals/MenuList > Group 1`] = `
156
- <div
157
- data-dark={false}
158
- >
159
- <ul
160
- className="charcoal-menu-list"
137
+ <div>
138
+ <div
139
+ data-dark="false"
161
140
  >
162
- <li
163
- className="charcoal-menu-item-group"
164
- role="presentation"
141
+ <ul
142
+ class="charcoal-menu-list"
165
143
  >
166
- <span>
167
- Section1
168
- </span>
169
- <ul
170
- role="group"
144
+ <li
145
+ class="charcoal-menu-item-group"
146
+ role="presentation"
171
147
  >
172
- <li
173
- className="charcoal-list-item"
174
- data-key="0"
175
- onClick={[Function]}
176
- onKeyDown={[Function]}
177
- role="option"
178
- tabIndex={-1}
179
- >
180
- Menu
181
- 0
182
- </li>
183
- <li
184
- className="charcoal-list-item"
185
- data-key="1"
186
- onClick={[Function]}
187
- onKeyDown={[Function]}
188
- role="option"
189
- tabIndex={-1}
190
- >
191
- Menu
192
- 1
193
- </li>
194
- <li
195
- className="charcoal-list-item"
196
- data-key="2"
197
- onClick={[Function]}
198
- onKeyDown={[Function]}
199
- role="option"
200
- tabIndex={-1}
148
+ <span>
149
+ Section1
150
+ </span>
151
+ <ul
152
+ role="group"
201
153
  >
202
- Menu
203
- 2
204
- </li>
205
- <li
206
- className="charcoal-list-item"
207
- data-key="3"
208
- onClick={[Function]}
209
- onKeyDown={[Function]}
210
- role="option"
211
- tabIndex={-1}
212
- >
213
- Menu
214
- 3
215
- </li>
216
- <li
217
- className="charcoal-list-item"
218
- data-key="4"
219
- onClick={[Function]}
220
- onKeyDown={[Function]}
221
- role="option"
222
- tabIndex={-1}
223
- >
224
- Menu
225
- 4
226
- </li>
227
- </ul>
228
- </li>
229
- <li
230
- className="charcoal-menu-item-group"
231
- role="presentation"
232
- >
233
- <span>
234
- Section2
235
- </span>
236
- <ul
237
- role="group"
154
+ <li
155
+ class="charcoal-list-item"
156
+ data-key="0"
157
+ role="option"
158
+ tabindex="-1"
159
+ >
160
+ Menu
161
+ 0
162
+ </li>
163
+ <li
164
+ class="charcoal-list-item"
165
+ data-key="1"
166
+ role="option"
167
+ tabindex="-1"
168
+ >
169
+ Menu
170
+ 1
171
+ </li>
172
+ <li
173
+ class="charcoal-list-item"
174
+ data-key="2"
175
+ role="option"
176
+ tabindex="-1"
177
+ >
178
+ Menu
179
+ 2
180
+ </li>
181
+ <li
182
+ class="charcoal-list-item"
183
+ data-key="3"
184
+ role="option"
185
+ tabindex="-1"
186
+ >
187
+ Menu
188
+ 3
189
+ </li>
190
+ <li
191
+ class="charcoal-list-item"
192
+ data-key="4"
193
+ role="option"
194
+ tabindex="-1"
195
+ >
196
+ Menu
197
+ 4
198
+ </li>
199
+ </ul>
200
+ </li>
201
+ <li
202
+ class="charcoal-menu-item-group"
203
+ role="presentation"
238
204
  >
239
- <li
240
- className="charcoal-list-item"
241
- data-key="5"
242
- onClick={[Function]}
243
- onKeyDown={[Function]}
244
- role="option"
245
- tabIndex={-1}
246
- >
247
- Menu
248
- 5
249
- </li>
250
- <li
251
- className="charcoal-list-item"
252
- data-key="6"
253
- onClick={[Function]}
254
- onKeyDown={[Function]}
255
- role="option"
256
- tabIndex={-1}
257
- >
258
- Menu
259
- 6
260
- </li>
261
- <li
262
- className="charcoal-list-item"
263
- data-key="7"
264
- onClick={[Function]}
265
- onKeyDown={[Function]}
266
- role="option"
267
- tabIndex={-1}
268
- >
269
- Menu
270
- 7
271
- </li>
272
- <li
273
- className="charcoal-list-item"
274
- data-key="8"
275
- onClick={[Function]}
276
- onKeyDown={[Function]}
277
- role="option"
278
- tabIndex={-1}
279
- >
280
- Menu
281
- 8
282
- </li>
283
- <li
284
- className="charcoal-list-item"
285
- data-key="9"
286
- onClick={[Function]}
287
- onKeyDown={[Function]}
288
- role="option"
289
- tabIndex={-1}
205
+ <span>
206
+ Section2
207
+ </span>
208
+ <ul
209
+ role="group"
290
210
  >
291
- Menu
292
- 9
293
- </li>
294
- </ul>
295
- </li>
296
- </ul>
211
+ <li
212
+ class="charcoal-list-item"
213
+ data-key="5"
214
+ role="option"
215
+ tabindex="-1"
216
+ >
217
+ Menu
218
+ 5
219
+ </li>
220
+ <li
221
+ class="charcoal-list-item"
222
+ data-key="6"
223
+ role="option"
224
+ tabindex="-1"
225
+ >
226
+ Menu
227
+ 6
228
+ </li>
229
+ <li
230
+ class="charcoal-list-item"
231
+ data-key="7"
232
+ role="option"
233
+ tabindex="-1"
234
+ >
235
+ Menu
236
+ 7
237
+ </li>
238
+ <li
239
+ class="charcoal-list-item"
240
+ data-key="8"
241
+ role="option"
242
+ tabindex="-1"
243
+ >
244
+ Menu
245
+ 8
246
+ </li>
247
+ <li
248
+ class="charcoal-list-item"
249
+ data-key="9"
250
+ role="option"
251
+ tabindex="-1"
252
+ >
253
+ Menu
254
+ 9
255
+ </li>
256
+ </ul>
257
+ </li>
258
+ </ul>
259
+ </div>
297
260
  </div>
298
261
  `;
package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot CHANGED
@@ -1,56 +1,34 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/internals/Popover > Basic 1`] = `
4
- <div
5
- data-dark={false}
6
- >
7
- <button
8
- className="charcoal-button"
9
- onClick={[Function]}
10
- style={
11
- Object {
12
- "position": "absolute",
13
- }
14
- }
4
+ <div>
5
+ <div
6
+ data-dark="false"
15
7
  >
16
- button
17
- </button>
18
- <button
19
- className="charcoal-button"
20
- onClick={[Function]}
21
- style={
22
- Object {
23
- "position": "absolute",
24
- "right": 8,
25
- }
26
- }
27
- >
28
- button
29
- </button>
30
- <button
31
- className="charcoal-button"
32
- onClick={[Function]}
33
- style={
34
- Object {
35
- "bottom": 8,
36
- "position": "absolute",
37
- }
38
- }
39
- >
40
- button
41
- </button>
42
- <button
43
- className="charcoal-button"
44
- onClick={[Function]}
45
- style={
46
- Object {
47
- "bottom": 8,
48
- "position": "absolute",
49
- "right": 8,
50
- }
51
- }
52
- >
53
- button
54
- </button>
8
+ <button
9
+ class="charcoal-button"
10
+ style="position: absolute;"
11
+ >
12
+ button
13
+ </button>
14
+ <button
15
+ class="charcoal-button"
16
+ style="position: absolute; right: 8px;"
17
+ >
18
+ button
19
+ </button>
20
+ <button
21
+ class="charcoal-button"
22
+ style="position: absolute; bottom: 8px;"
23
+ >
24
+ button
25
+ </button>
26
+ <button
27
+ class="charcoal-button"
28
+ style="position: absolute; right: 8px; bottom: 8px;"
29
+ >
30
+ button
31
+ </button>
32
+ </div>
55
33
  </div>
56
34
  `;