@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/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot CHANGED
@@ -1,77 +1,74 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/internals/CheckboxInput > Checked 1`] = `
4
- <div
5
- data-dark={false}
6
- >
7
- <input
8
- checked={true}
9
- className="charcoal-checkbox-input"
10
- onChange={[Function]}
11
- type="checkbox"
12
- />
4
+ <div>
5
+ <div
6
+ data-dark="false"
7
+ >
8
+ <input
9
+ checked=""
10
+ class="charcoal-checkbox-input"
11
+ type="checkbox"
12
+ />
13
+ </div>
13
14
  </div>
14
15
  `;
15
16
 
16
17
  exports[`Storybook Tests > react/internals/CheckboxInput > Default 1`] = `
17
- <div
18
- data-dark={false}
19
- >
20
- <input
21
- className="charcoal-checkbox-input"
22
- onChange={[Function]}
23
- type="checkbox"
24
- />
18
+ <div>
19
+ <div
20
+ data-dark="false"
21
+ >
22
+ <input
23
+ class="charcoal-checkbox-input"
24
+ type="checkbox"
25
+ />
26
+ </div>
25
27
  </div>
26
28
  `;
27
29
 
28
30
  exports[`Storybook Tests > react/internals/CheckboxInput > Disabled 1`] = `
29
- <div
30
- data-dark={false}
31
- >
32
- <input
33
- checked={false}
34
- className="charcoal-checkbox-input"
35
- disabled={true}
36
- onChange={[Function]}
37
- type="checkbox"
38
- />
31
+ <div>
32
+ <div
33
+ data-dark="false"
34
+ >
35
+ <input
36
+ class="charcoal-checkbox-input"
37
+ disabled=""
38
+ type="checkbox"
39
+ />
40
+ </div>
39
41
  </div>
40
42
  `;
41
43
 
42
44
  exports[`Storybook Tests > react/internals/CheckboxInput > Invalid 1`] = `
43
- <div
44
- data-dark={false}
45
- >
46
- <input
47
- aria-invalid={true}
48
- checked={false}
49
- className="charcoal-checkbox-input"
50
- onChange={[Function]}
51
- type="checkbox"
52
- />
45
+ <div>
46
+ <div
47
+ data-dark="false"
48
+ >
49
+ <input
50
+ aria-invalid="true"
51
+ class="charcoal-checkbox-input"
52
+ type="checkbox"
53
+ />
54
+ </div>
53
55
  </div>
54
56
  `;
55
57
 
56
58
  exports[`Storybook Tests > react/internals/CheckboxInput > Rounded 1`] = `
57
- <div
58
- data-dark={false}
59
- >
59
+ <div>
60
60
  <div
61
- style={
62
- Object {
63
- "backgroundColor": "var(--charcoal-background2)",
64
- "padding": 8,
65
- }
66
- }
61
+ data-dark="false"
67
62
  >
68
- <input
69
- checked={false}
70
- className="charcoal-checkbox-input"
71
- data-rounded={true}
72
- onChange={[Function]}
73
- type="checkbox"
74
- />
63
+ <div
64
+ style="padding: 8px;"
65
+ >
66
+ <input
67
+ class="charcoal-checkbox-input"
68
+ data-rounded="true"
69
+ type="checkbox"
70
+ />
71
+ </div>
75
72
  </div>
76
73
  </div>
77
74
  `;
package/src/components/Checkbox/__snapshots__/index.story.storyshot CHANGED
@@ -1,137 +1,143 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/Checkbox > Checked 1`] = `
4
- <div
5
- data-dark={false}
6
- >
7
- <label
8
- className="charcoal-checkbox__label"
9
- htmlFor="test-id"
4
+ <div>
5
+ <div
6
+ data-dark="false"
10
7
  >
11
- <input
12
- checked={true}
13
- className="charcoal-checkbox-input"
14
- id="test-id"
15
- onChange={[Function]}
16
- type="checkbox"
17
- />
18
- <div
19
- className="charcoal-checkbox__label_div"
8
+ <label
9
+ class="charcoal-checkbox__label"
10
+ for="test-id"
20
11
  >
21
- Checked
22
- </div>
23
- </label>
12
+ <input
13
+ checked=""
14
+ class="charcoal-checkbox-input"
15
+ id="test-id"
16
+ type="checkbox"
17
+ />
18
+ <div
19
+ class="charcoal-checkbox__label_div"
20
+ >
21
+ Checked
22
+ </div>
23
+ </label>
24
+ </div>
24
25
  </div>
25
26
  `;
26
27
 
27
28
  exports[`Storybook Tests > react/Checkbox > Default 1`] = `
28
- <div
29
- data-dark={false}
30
- >
31
- <input
32
- className="charcoal-checkbox-input"
33
- id="test-id"
34
- onChange={[Function]}
35
- type="checkbox"
36
- />
37
- </div>
38
- `;
39
-
40
- exports[`Storybook Tests > react/Checkbox > Disabled 1`] = `
41
- <div
42
- data-dark={false}
43
- >
44
- <label
45
- aria-disabled={true}
46
- className="charcoal-checkbox__label"
47
- htmlFor="test-id"
29
+ <div>
30
+ <div
31
+ data-dark="false"
48
32
  >
49
33
  <input
50
- className="charcoal-checkbox-input"
51
- disabled={true}
34
+ class="charcoal-checkbox-input"
52
35
  id="test-id"
53
- onChange={[Function]}
54
36
  type="checkbox"
55
37
  />
56
- <div
57
- className="charcoal-checkbox__label_div"
38
+ </div>
39
+ </div>
40
+ `;
41
+
42
+ exports[`Storybook Tests > react/Checkbox > Disabled 1`] = `
43
+ <div>
44
+ <div
45
+ data-dark="false"
46
+ >
47
+ <label
48
+ aria-disabled="true"
49
+ class="charcoal-checkbox__label"
50
+ for="test-id"
58
51
  >
59
- Disabled
60
- </div>
61
- </label>
52
+ <input
53
+ class="charcoal-checkbox-input"
54
+ disabled=""
55
+ id="test-id"
56
+ type="checkbox"
57
+ />
58
+ <div
59
+ class="charcoal-checkbox__label_div"
60
+ >
61
+ Disabled
62
+ </div>
63
+ </label>
64
+ </div>
62
65
  </div>
63
66
  `;
64
67
 
65
68
  exports[`Storybook Tests > react/Checkbox > Invalid 1`] = `
66
- <div
67
- data-dark={false}
68
- >
69
- <label
70
- className="charcoal-checkbox__label"
71
- htmlFor="test-id"
69
+ <div>
70
+ <div
71
+ data-dark="false"
72
72
  >
73
- <input
74
- aria-invalid={true}
75
- className="charcoal-checkbox-input"
76
- id="test-id"
77
- name="labelled"
78
- onChange={[Function]}
79
- type="checkbox"
80
- />
81
- <div
82
- className="charcoal-checkbox__label_div"
73
+ <label
74
+ class="charcoal-checkbox__label"
75
+ for="test-id"
83
76
  >
84
- Invalid
85
- </div>
86
- </label>
77
+ <input
78
+ aria-invalid="true"
79
+ class="charcoal-checkbox-input"
80
+ id="test-id"
81
+ name="labelled"
82
+ type="checkbox"
83
+ />
84
+ <div
85
+ class="charcoal-checkbox__label_div"
86
+ >
87
+ Invalid
88
+ </div>
89
+ </label>
90
+ </div>
87
91
  </div>
88
92
  `;
89
93
 
90
94
  exports[`Storybook Tests > react/Checkbox > Label 1`] = `
91
- <div
92
- data-dark={false}
93
- >
94
- <label
95
- className="charcoal-checkbox__label"
96
- htmlFor="test-id"
95
+ <div>
96
+ <div
97
+ data-dark="false"
97
98
  >
98
- <input
99
- className="charcoal-checkbox-input"
100
- id="test-id"
101
- onChange={[Function]}
102
- type="checkbox"
103
- />
104
- <div
105
- className="charcoal-checkbox__label_div"
99
+ <label
100
+ class="charcoal-checkbox__label"
101
+ for="test-id"
106
102
  >
107
- Checkbox
108
- </div>
109
- </label>
103
+ <input
104
+ class="charcoal-checkbox-input"
105
+ id="test-id"
106
+ type="checkbox"
107
+ />
108
+ <div
109
+ class="charcoal-checkbox__label_div"
110
+ >
111
+ Checkbox
112
+ </div>
113
+ </label>
114
+ </div>
110
115
  </div>
111
116
  `;
112
117
 
113
118
  exports[`Storybook Tests > react/Checkbox > ReadOnly 1`] = `
114
- <div
115
- data-dark={false}
116
- >
117
- <label
118
- className="charcoal-checkbox__label"
119
- htmlFor="test-id"
119
+ <div>
120
+ <div
121
+ data-dark="false"
120
122
  >
121
- <input
122
- checked={true}
123
- className="charcoal-checkbox-input"
124
- id="test-id"
125
- name="labelled"
126
- onChange={[Function]}
127
- readOnly={true}
128
- type="checkbox"
129
- />
130
- <div
131
- className="charcoal-checkbox__label_div"
123
+ <label
124
+ class="charcoal-checkbox__label"
125
+ for="test-id"
132
126
  >
133
- ReadOnly
134
- </div>
135
- </label>
127
+ <input
128
+ checked=""
129
+ class="charcoal-checkbox-input"
130
+ id="test-id"
131
+ name="labelled"
132
+ readonly=""
133
+ type="checkbox"
134
+ />
135
+ <div
136
+ class="charcoal-checkbox__label_div"
137
+ >
138
+ ReadOnly
139
+ </div>
140
+ </label>
141
+ </div>
136
142
  </div>
137
143
  `;
package/src/components/Clickable/__snapshots__/index.story.storyshot CHANGED
@@ -1,28 +1,30 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/Clickable > Button 1`] = `
4
- <div
5
- data-dark={false}
6
- >
7
- <button
8
- className="charcoal-clickable"
9
- onClick={[Function]}
4
+ <div>
5
+ <div
6
+ data-dark="false"
10
7
  >
11
- button
12
- </button>
8
+ <button
9
+ class="charcoal-clickable"
10
+ >
11
+ button
12
+ </button>
13
+ </div>
13
14
  </div>
14
15
  `;
15
16
 
16
17
  exports[`Storybook Tests > react/Clickable > Link 1`] = `
17
- <div
18
- data-dark={false}
19
- >
20
- <a
21
- className="charcoal-clickable"
22
- href="#"
23
- onClick={[Function]}
18
+ <div>
19
+ <div
20
+ data-dark="false"
24
21
  >
25
- link
26
- </a>
22
+ <a
23
+ class="charcoal-clickable"
24
+ href="#"
25
+ >
26
+ link
27
+ </a>
28
+ </div>
27
29
  </div>
28
30
  `;
package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot CHANGED
@@ -1,62 +1,53 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/internals/ListItem > Basic 1`] = `
4
- <div
5
- data-dark={false}
6
- >
7
- <li
8
- className="charcoal-list-item"
4
+ <div>
5
+ <div
6
+ data-dark="false"
9
7
  >
10
- Item
11
- </li>
12
- <li
13
- className="charcoal-list-item"
14
- >
15
- <pixiv-icon
16
- name="16/Add"
17
- />
18
- Add
19
- </li>
20
- <a
21
- className="charcoal-list-item"
22
- href="#"
23
- >
24
- Normal Link
25
- </a>
26
- <a
27
- className="charcoal-list-item"
28
- href="#"
29
- style={
30
- Object {
31
- "color": "red",
32
- }
33
- }
34
- >
35
- Custom Link
36
- </a>
37
- <li
38
- className="charcoal-list-item"
39
- onClick={[Function]}
40
- >
41
- Switch
42
- <div
43
- style={
44
- Object {
45
- "marginLeft": "auto",
46
- }
47
- }
8
+ <li
9
+ class="charcoal-list-item"
48
10
  >
49
- <input
50
- checked={false}
51
- className="charcoal-switch-input"
52
- id="test-id"
53
- label="hello"
54
- name="hello"
55
- onChange={[Function]}
56
- role="switch"
57
- type="checkbox"
11
+ Item
12
+ </li>
13
+ <li
14
+ class="charcoal-list-item"
15
+ >
16
+ <pixiv-icon
17
+ name="16/Add"
58
18
  />
59
- </div>
60
- </li>
19
+ Add
20
+ </li>
21
+ <a
22
+ class="charcoal-list-item"
23
+ href="#"
24
+ >
25
+ Normal Link
26
+ </a>
27
+ <a
28
+ class="charcoal-list-item"
29
+ href="#"
30
+ style="color: red;"
31
+ >
32
+ Custom Link
33
+ </a>
34
+ <li
35
+ class="charcoal-list-item"
36
+ >
37
+ Switch
38
+ <div
39
+ style="margin-left: auto;"
40
+ >
41
+ <input
42
+ class="charcoal-switch-input"
43
+ id="test-id"
44
+ label="hello"
45
+ name="hello"
46
+ role="switch"
47
+ type="checkbox"
48
+ />
49
+ </div>
50
+ </li>
51
+ </div>
61
52
  </div>
62
53
  `;