@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/Icon/__snapshots__/index.story.storyshot CHANGED
@@ -1,12 +1,14 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/Icon > Default 1`] = `
4
- <div
5
- data-dark={false}
6
- >
7
- <pixiv-icon
8
- name="16/Add"
9
- scale={1}
10
- />
4
+ <div>
5
+ <div
6
+ data-dark="false"
7
+ >
8
+ <pixiv-icon
9
+ name="16/Add"
10
+ scale="1"
11
+ />
12
+ </div>
11
13
  </div>
12
14
  `;
package/src/components/IconButton/__snapshots__/index.story.storyshot CHANGED
@@ -1,53 +1,59 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/IconButton > Default 1`] = `
4
- <div
5
- data-dark={false}
6
- >
7
- <button
8
- className="charcoal-icon-button"
9
- data-active={false}
10
- data-size="M"
11
- data-variant="Default"
12
- title="add"
4
+ <div>
5
+ <div
6
+ data-dark="false"
13
7
  >
14
- <pixiv-icon
15
- name="16/Add"
16
- />
17
- </button>
8
+ <button
9
+ class="charcoal-icon-button"
10
+ data-active="false"
11
+ data-size="M"
12
+ data-variant="Default"
13
+ title="add"
14
+ >
15
+ <pixiv-icon
16
+ name="16/Add"
17
+ />
18
+ </button>
19
+ </div>
18
20
  </div>
19
21
  `;
20
22
 
21
23
  exports[`Storybook Tests > react/IconButton > IsActive 1`] = `
22
- <div
23
- data-dark={false}
24
- >
25
- <button
26
- className="charcoal-icon-button"
27
- data-active={true}
28
- data-size="M"
29
- data-variant="Default"
24
+ <div>
25
+ <div
26
+ data-dark="false"
30
27
  >
31
- <pixiv-icon
32
- name="16/Add"
33
- />
34
- </button>
28
+ <button
29
+ class="charcoal-icon-button"
30
+ data-active="true"
31
+ data-size="M"
32
+ data-variant="Default"
33
+ >
34
+ <pixiv-icon
35
+ name="16/Add"
36
+ />
37
+ </button>
38
+ </div>
35
39
  </div>
36
40
  `;
37
41
 
38
42
  exports[`Storybook Tests > react/IconButton > Overlay 1`] = `
39
- <div
40
- data-dark={false}
41
- >
42
- <button
43
- className="charcoal-icon-button"
44
- data-active={false}
45
- data-size="M"
46
- data-variant="Overlay"
43
+ <div>
44
+ <div
45
+ data-dark="false"
47
46
  >
48
- <pixiv-icon
49
- name="16/Add"
50
- />
51
- </button>
47
+ <button
48
+ class="charcoal-icon-button"
49
+ data-active="false"
50
+ data-size="M"
51
+ data-variant="Overlay"
52
+ >
53
+ <pixiv-icon
54
+ name="16/Add"
55
+ />
56
+ </button>
57
+ </div>
52
58
  </div>
53
59
  `;
package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot CHANGED
@@ -1,97 +1,85 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Storybook Tests > react/LoadingSpinner > Default 1`] = `
4
- <div
5
- data-dark={false}
6
- >
4
+ <div>
7
5
  <div
8
- className="charcoal-loading-spinner"
9
- data-transparent={false}
10
- role="progressbar"
11
- style={
12
- Object {
13
- "--charcoal-loading-spinner-padding": "16px",
14
- "--charcoal-loading-spinner-size": "48px",
15
- }
16
- }
6
+ data-dark="false"
17
7
  >
18
8
  <div
19
- className="charcoal-loading-spinner-icon"
20
- data-once={false}
21
- role="presentation"
22
- />
9
+ class="charcoal-loading-spinner"
10
+ data-transparent="false"
11
+ role="progressbar"
12
+ style="--charcoal-loading-spinner-size: 48px; --charcoal-loading-spinner-padding: 16px;"
13
+ >
14
+ <div
15
+ class="charcoal-loading-spinner-icon"
16
+ data-once="false"
17
+ role="presentation"
18
+ />
19
+ </div>
23
20
  </div>
24
21
  </div>
25
22
  `;
26
23
 
27
24
  exports[`Storybook Tests > react/LoadingSpinner > Padding 1`] = `
28
- <div
29
- data-dark={false}
30
- >
25
+ <div>
31
26
  <div
32
- className="charcoal-loading-spinner"
33
- data-transparent={false}
34
- role="progressbar"
35
- style={
36
- Object {
37
- "--charcoal-loading-spinner-padding": "24px",
38
- "--charcoal-loading-spinner-size": "48px",
39
- }
40
- }
27
+ data-dark="false"
41
28
  >
42
29
  <div
43
- className="charcoal-loading-spinner-icon"
44
- data-once={false}
45
- role="presentation"
46
- />
30
+ class="charcoal-loading-spinner"
31
+ data-transparent="false"
32
+ role="progressbar"
33
+ style="--charcoal-loading-spinner-size: 48px; --charcoal-loading-spinner-padding: 24px;"
34
+ >
35
+ <div
36
+ class="charcoal-loading-spinner-icon"
37
+ data-once="false"
38
+ role="presentation"
39
+ />
40
+ </div>
47
41
  </div>
48
42
  </div>
49
43
  `;
50
44
 
51
45
  exports[`Storybook Tests > react/LoadingSpinner > Size 1`] = `
52
- <div
53
- data-dark={false}
54
- >
46
+ <div>
55
47
  <div
56
- className="charcoal-loading-spinner"
57
- data-transparent={false}
58
- role="progressbar"
59
- style={
60
- Object {
61
- "--charcoal-loading-spinner-padding": "16px",
62
- "--charcoal-loading-spinner-size": "128px",
63
- }
64
- }
48
+ data-dark="false"
65
49
  >
66
50
  <div
67
- className="charcoal-loading-spinner-icon"
68
- data-once={false}
69
- role="presentation"
70
- />
51
+ class="charcoal-loading-spinner"
52
+ data-transparent="false"
53
+ role="progressbar"
54
+ style="--charcoal-loading-spinner-size: 128px; --charcoal-loading-spinner-padding: 16px;"
55
+ >
56
+ <div
57
+ class="charcoal-loading-spinner-icon"
58
+ data-once="false"
59
+ role="presentation"
60
+ />
61
+ </div>
71
62
  </div>
72
63
  </div>
73
64
  `;
74
65
 
75
66
  exports[`Storybook Tests > react/LoadingSpinner > Transparent 1`] = `
76
- <div
77
- data-dark={false}
78
- >
67
+ <div>
79
68
  <div
80
- className="charcoal-loading-spinner"
81
- data-transparent={true}
82
- role="progressbar"
83
- style={
84
- Object {
85
- "--charcoal-loading-spinner-padding": "16px",
86
- "--charcoal-loading-spinner-size": "48px",
87
- }
88
- }
69
+ data-dark="false"
89
70
  >
90
71
  <div
91
- className="charcoal-loading-spinner-icon"
92
- data-once={false}
93
- role="presentation"
94
- />
72
+ class="charcoal-loading-spinner"
73
+ data-transparent="true"
74
+ role="progressbar"
75
+ style="--charcoal-loading-spinner-size: 48px; --charcoal-loading-spinner-padding: 16px;"
76
+ >
77
+ <div
78
+ class="charcoal-loading-spinner-icon"
79
+ data-once="false"
80
+ role="presentation"
81
+ />
82
+ </div>
95
83
  </div>
96
84
  </div>
97
85
  `;