@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/SegmentedControl/__snapshots__/index.story.storyshot CHANGED
@@ -1,245 +1,133 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/SegmentedControl > ObjectSegments 1`] = `
4
- <div
5
- data-dark={false}
6
- >
4
+ <div>
7
5
  <div
8
- aria-label="test"
9
- aria-orientation="vertical"
10
- className="charcoal-segmented-control"
11
- id="test-id"
12
- onBlur={[Function]}
13
- onFocus={[Function]}
14
- onKeyDown={[Function]}
15
- role="radiogroup"
6
+ data-dark="false"
16
7
  >
17
- <label
18
- aria-disabled={false}
19
- className="charcoal-segmented-control-radio__label"
20
- data-checked={false}
8
+ <div
9
+ aria-label="test"
10
+ aria-orientation="vertical"
11
+ class="charcoal-segmented-control"
12
+ id="test-id"
13
+ role="radiogroup"
21
14
  >
22
- <input
23
- checked={false}
24
- className="charcoal-segmented-control-radio__input"
25
- disabled={false}
26
- name="test-id"
27
- onChange={[Function]}
28
- onClick={[Function]}
29
- onDragStart={[Function]}
30
- onFocus={[Function]}
31
- onKeyDown={[Function]}
32
- onMouseDown={[Function]}
33
- onMouseEnter={[Function]}
34
- onMouseLeave={[Function]}
35
- onMouseUp={[Function]}
36
- onTouchCancel={[Function]}
37
- onTouchEnd={[Function]}
38
- onTouchMove={[Function]}
39
- onTouchStart={[Function]}
40
- required={false}
41
- tabIndex={0}
42
- type="radio"
43
- value="option1"
44
- />
45
- 選択肢1
46
- </label>
47
- <label
48
- aria-disabled={false}
49
- className="charcoal-segmented-control-radio__label"
50
- data-checked={false}
51
- >
52
- <input
53
- checked={false}
54
- className="charcoal-segmented-control-radio__input"
55
- disabled={false}
56
- name="test-id"
57
- onChange={[Function]}
58
- onClick={[Function]}
59
- onDragStart={[Function]}
60
- onFocus={[Function]}
61
- onKeyDown={[Function]}
62
- onMouseDown={[Function]}
63
- onMouseEnter={[Function]}
64
- onMouseLeave={[Function]}
65
- onMouseUp={[Function]}
66
- onTouchCancel={[Function]}
67
- onTouchEnd={[Function]}
68
- onTouchMove={[Function]}
69
- onTouchStart={[Function]}
70
- required={false}
71
- tabIndex={0}
72
- type="radio"
73
- value="option2"
74
- />
75
- 選択肢2
76
- </label>
77
- <label
78
- aria-disabled={false}
79
- className="charcoal-segmented-control-radio__label"
80
- data-checked={false}
81
- >
82
- <input
83
- checked={false}
84
- className="charcoal-segmented-control-radio__input"
85
- disabled={false}
86
- name="test-id"
87
- onChange={[Function]}
88
- onClick={[Function]}
89
- onDragStart={[Function]}
90
- onFocus={[Function]}
91
- onKeyDown={[Function]}
92
- onMouseDown={[Function]}
93
- onMouseEnter={[Function]}
94
- onMouseLeave={[Function]}
95
- onMouseUp={[Function]}
96
- onTouchCancel={[Function]}
97
- onTouchEnd={[Function]}
98
- onTouchMove={[Function]}
99
- onTouchStart={[Function]}
100
- required={false}
101
- tabIndex={0}
102
- type="radio"
103
- value="option3"
104
- />
105
- 選択肢3
106
- </label>
107
- <label
108
- aria-disabled={true}
109
- className="charcoal-segmented-control-radio__label"
110
- data-checked={false}
111
- >
112
- <input
113
- checked={false}
114
- className="charcoal-segmented-control-radio__input"
115
- disabled={true}
116
- name="test-id"
117
- onChange={[Function]}
118
- onClick={[Function]}
119
- onDragStart={[Function]}
120
- onKeyDown={[Function]}
121
- onMouseDown={[Function]}
122
- onMouseEnter={[Function]}
123
- onMouseLeave={[Function]}
124
- onMouseUp={[Function]}
125
- onTouchCancel={[Function]}
126
- onTouchEnd={[Function]}
127
- onTouchMove={[Function]}
128
- onTouchStart={[Function]}
129
- required={false}
130
- type="radio"
131
- value="option4"
132
- />
133
- 選択肢4
134
- </label>
15
+ <label
16
+ aria-disabled="false"
17
+ class="charcoal-segmented-control-radio__label"
18
+ data-checked="false"
19
+ >
20
+ <input
21
+ class="charcoal-segmented-control-radio__input"
22
+ name="test-id"
23
+ tabindex="0"
24
+ type="radio"
25
+ value="option1"
26
+ />
27
+ 選択肢1
28
+ </label>
29
+ <label
30
+ aria-disabled="false"
31
+ class="charcoal-segmented-control-radio__label"
32
+ data-checked="false"
33
+ >
34
+ <input
35
+ class="charcoal-segmented-control-radio__input"
36
+ name="test-id"
37
+ tabindex="0"
38
+ type="radio"
39
+ value="option2"
40
+ />
41
+ 選択肢2
42
+ </label>
43
+ <label
44
+ aria-disabled="false"
45
+ class="charcoal-segmented-control-radio__label"
46
+ data-checked="false"
47
+ >
48
+ <input
49
+ class="charcoal-segmented-control-radio__input"
50
+ name="test-id"
51
+ tabindex="0"
52
+ type="radio"
53
+ value="option3"
54
+ />
55
+ 選択肢3
56
+ </label>
57
+ <label
58
+ aria-disabled="true"
59
+ class="charcoal-segmented-control-radio__label"
60
+ data-checked="false"
61
+ >
62
+ <input
63
+ class="charcoal-segmented-control-radio__input"
64
+ disabled=""
65
+ name="test-id"
66
+ type="radio"
67
+ value="option4"
68
+ />
69
+ 選択肢4
70
+ </label>
71
+ </div>
135
72
  </div>
136
73
  </div>
137
74
  `;
138
75
 
139
76
  exports[`Storybook Tests > react/SegmentedControl > StringSegments 1`] = `
140
- <div
141
- data-dark={false}
142
- >
77
+ <div>
143
78
  <div
144
- aria-label="test"
145
- aria-orientation="vertical"
146
- className="charcoal-segmented-control"
147
- id="test-id"
148
- onBlur={[Function]}
149
- onFocus={[Function]}
150
- onKeyDown={[Function]}
151
- role="radiogroup"
79
+ data-dark="false"
152
80
  >
153
- <label
154
- aria-disabled={false}
155
- className="charcoal-segmented-control-radio__label"
156
- data-checked={false}
157
- >
158
- <input
159
- checked={false}
160
- className="charcoal-segmented-control-radio__input"
161
- disabled={false}
162
- name="test-id"
163
- onChange={[Function]}
164
- onClick={[Function]}
165
- onDragStart={[Function]}
166
- onFocus={[Function]}
167
- onKeyDown={[Function]}
168
- onMouseDown={[Function]}
169
- onMouseEnter={[Function]}
170
- onMouseLeave={[Function]}
171
- onMouseUp={[Function]}
172
- onTouchCancel={[Function]}
173
- onTouchEnd={[Function]}
174
- onTouchMove={[Function]}
175
- onTouchStart={[Function]}
176
- required={false}
177
- tabIndex={0}
178
- type="radio"
179
- value="option1"
180
- />
181
- option1
182
- </label>
183
- <label
184
- aria-disabled={false}
185
- className="charcoal-segmented-control-radio__label"
186
- data-checked={false}
187
- >
188
- <input
189
- checked={false}
190
- className="charcoal-segmented-control-radio__input"
191
- disabled={false}
192
- name="test-id"
193
- onChange={[Function]}
194
- onClick={[Function]}
195
- onDragStart={[Function]}
196
- onFocus={[Function]}
197
- onKeyDown={[Function]}
198
- onMouseDown={[Function]}
199
- onMouseEnter={[Function]}
200
- onMouseLeave={[Function]}
201
- onMouseUp={[Function]}
202
- onTouchCancel={[Function]}
203
- onTouchEnd={[Function]}
204
- onTouchMove={[Function]}
205
- onTouchStart={[Function]}
206
- required={false}
207
- tabIndex={0}
208
- type="radio"
209
- value="option2"
210
- />
211
- option2
212
- </label>
213
- <label
214
- aria-disabled={false}
215
- className="charcoal-segmented-control-radio__label"
216
- data-checked={false}
81
+ <div
82
+ aria-label="test"
83
+ aria-orientation="vertical"
84
+ class="charcoal-segmented-control"
85
+ id="test-id"
86
+ role="radiogroup"
217
87
  >
218
- <input
219
- checked={false}
220
- className="charcoal-segmented-control-radio__input"
221
- disabled={false}
222
- name="test-id"
223
- onChange={[Function]}
224
- onClick={[Function]}
225
- onDragStart={[Function]}
226
- onFocus={[Function]}
227
- onKeyDown={[Function]}
228
- onMouseDown={[Function]}
229
- onMouseEnter={[Function]}
230
- onMouseLeave={[Function]}
231
- onMouseUp={[Function]}
232
- onTouchCancel={[Function]}
233
- onTouchEnd={[Function]}
234
- onTouchMove={[Function]}
235
- onTouchStart={[Function]}
236
- required={false}
237
- tabIndex={0}
238
- type="radio"
239
- value="option3"
240
- />
241
- option3
242
- </label>
88
+ <label
89
+ aria-disabled="false"
90
+ class="charcoal-segmented-control-radio__label"
91
+ data-checked="false"
92
+ >
93
+ <input
94
+ class="charcoal-segmented-control-radio__input"
95
+ name="test-id"
96
+ tabindex="0"
97
+ type="radio"
98
+ value="option1"
99
+ />
100
+ option1
101
+ </label>
102
+ <label
103
+ aria-disabled="false"
104
+ class="charcoal-segmented-control-radio__label"
105
+ data-checked="false"
106
+ >
107
+ <input
108
+ class="charcoal-segmented-control-radio__input"
109
+ name="test-id"
110
+ tabindex="0"
111
+ type="radio"
112
+ value="option2"
113
+ />
114
+ option2
115
+ </label>
116
+ <label
117
+ aria-disabled="false"
118
+ class="charcoal-segmented-control-radio__label"
119
+ data-checked="false"
120
+ >
121
+ <input
122
+ class="charcoal-segmented-control-radio__input"
123
+ name="test-id"
124
+ tabindex="0"
125
+ type="radio"
126
+ value="option3"
127
+ />
128
+ option3
129
+ </label>
130
+ </div>
243
131
  </div>
244
132
  </div>
245
133
  `;
package/src/components/Switch/__snapshots__/index.story.storyshot CHANGED
@@ -1,96 +1,97 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/Switch > Checked 1`] = `
4
- <div
5
- data-dark={false}
6
- >
7
- <div>
8
- <input
9
- checked={true}
10
- className="charcoal-switch-input"
11
- id="test-id"
12
- label="checked"
13
- name="name"
14
- onChange={[Function]}
15
- role="switch"
16
- type="checkbox"
17
- />
4
+ <div>
5
+ <div
6
+ data-dark="false"
7
+ >
8
+ <div>
9
+ <input
10
+ checked=""
11
+ class="charcoal-switch-input"
12
+ id="test-id"
13
+ label="checked"
14
+ name="name"
15
+ role="switch"
16
+ type="checkbox"
17
+ />
18
+ </div>
18
19
  </div>
19
20
  </div>
20
21
  `;
21
22
 
22
23
  exports[`Storybook Tests > react/Switch > Default 1`] = `
23
- <div
24
- data-dark={false}
25
- >
26
- <div>
27
- <input
28
- checked={false}
29
- className="charcoal-switch-input"
30
- id="test-id"
31
- name="name"
32
- onChange={[Function]}
33
- role="switch"
34
- type="checkbox"
35
- />
36
- </div>
37
- </div>
38
- `;
39
-
40
- exports[`Storybook Tests > react/Switch > Disabled 1`] = `
41
- <div
42
- data-dark={false}
43
- >
44
- <div>
45
- <label
46
- aria-disabled={true}
47
- className="charcoal-switch__label"
48
- htmlFor="test-id"
49
- >
24
+ <div>
25
+ <div
26
+ data-dark="false"
27
+ >
28
+ <div>
50
29
  <input
51
- checked={false}
52
- className="charcoal-switch-input"
53
- disabled={true}
30
+ class="charcoal-switch-input"
54
31
  id="test-id"
55
- name="disabled"
56
- onChange={[Function]}
32
+ name="name"
57
33
  role="switch"
58
34
  type="checkbox"
59
35
  />
60
- <div
61
- className="charcoal-switch__label_div"
36
+ </div>
37
+ </div>
38
+ </div>
39
+ `;
40
+
41
+ exports[`Storybook Tests > react/Switch > Disabled 1`] = `
42
+ <div>
43
+ <div
44
+ data-dark="false"
45
+ >
46
+ <div>
47
+ <label
48
+ aria-disabled="true"
49
+ class="charcoal-switch__label"
50
+ for="test-id"
62
51
  >
63
- Label
64
- </div>
65
- </label>
52
+ <input
53
+ class="charcoal-switch-input"
54
+ disabled=""
55
+ id="test-id"
56
+ name="disabled"
57
+ role="switch"
58
+ type="checkbox"
59
+ />
60
+ <div
61
+ class="charcoal-switch__label_div"
62
+ >
63
+ Label
64
+ </div>
65
+ </label>
66
+ </div>
66
67
  </div>
67
68
  </div>
68
69
  `;
69
70
 
70
71
  exports[`Storybook Tests > react/Switch > Label 1`] = `
71
- <div
72
- data-dark={false}
73
- >
74
- <div>
75
- <label
76
- className="charcoal-switch__label"
77
- htmlFor="test-id"
78
- >
79
- <input
80
- checked={false}
81
- className="charcoal-switch-input"
82
- id="test-id"
83
- name="label"
84
- onChange={[Function]}
85
- role="switch"
86
- type="checkbox"
87
- />
88
- <div
89
- className="charcoal-switch__label_div"
72
+ <div>
73
+ <div
74
+ data-dark="false"
75
+ >
76
+ <div>
77
+ <label
78
+ class="charcoal-switch__label"
79
+ for="test-id"
90
80
  >
91
- Label
92
- </div>
93
- </label>
81
+ <input
82
+ class="charcoal-switch-input"
83
+ id="test-id"
84
+ name="label"
85
+ role="switch"
86
+ type="checkbox"
87
+ />
88
+ <div
89
+ class="charcoal-switch__label_div"
90
+ >
91
+ Label
92
+ </div>
93
+ </label>
94
+ </div>
94
95
  </div>
95
96
  </div>
96
97
  `;