@charcoal-ui/react 2.4.0 → 2.6.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 (69) hide show
  1. package/dist/_lib/compat.d.ts +1 -1
  2. package/dist/_lib/compat.d.ts.map +1 -1
  3. package/dist/components/Button/index.d.ts +3 -3
  4. package/dist/components/Button/index.d.ts.map +1 -1
  5. package/dist/components/Checkbox/index.d.ts +2 -2
  6. package/dist/components/Checkbox/index.d.ts.map +1 -1
  7. package/dist/components/Checkbox/index.story.d.ts +1 -1
  8. package/dist/components/Checkbox/index.story.d.ts.map +1 -1
  9. package/dist/components/Clickable/index.d.ts +2 -2
  10. package/dist/components/Clickable/index.d.ts.map +1 -1
  11. package/dist/components/DropdownSelector/Divider.d.ts +4 -0
  12. package/dist/components/DropdownSelector/Divider.d.ts.map +1 -0
  13. package/dist/components/DropdownSelector/DropdownPopover.d.ts +1 -1
  14. package/dist/components/DropdownSelector/DropdownPopover.d.ts.map +1 -1
  15. package/dist/components/DropdownSelector/ListBoxSection.d.ts +7 -0
  16. package/dist/components/DropdownSelector/ListBoxSection.d.ts.map +1 -0
  17. package/dist/components/DropdownSelector/Listbox.d.ts +2 -2
  18. package/dist/components/DropdownSelector/Listbox.d.ts.map +1 -1
  19. package/dist/components/DropdownSelector/Option.d.ts +11 -0
  20. package/dist/components/DropdownSelector/Option.d.ts.map +1 -0
  21. package/dist/components/DropdownSelector/index.d.ts +3 -3
  22. package/dist/components/DropdownSelector/index.d.ts.map +1 -1
  23. package/dist/components/DropdownSelector/index.story.d.ts +5 -5
  24. package/dist/components/DropdownSelector/index.story.d.ts.map +1 -1
  25. package/dist/components/Icon/index.story.d.ts +8 -3
  26. package/dist/components/Icon/index.story.d.ts.map +1 -1
  27. package/dist/components/IconButton/index.d.ts +3 -3
  28. package/dist/components/IconButton/index.d.ts.map +1 -1
  29. package/dist/components/IconButton/index.story.d.ts +1 -1
  30. package/dist/components/IconButton/index.story.d.ts.map +1 -1
  31. package/dist/components/Modal/index.d.ts +1 -1
  32. package/dist/components/Modal/index.d.ts.map +1 -1
  33. package/dist/components/MultiSelect/context.d.ts +1 -1
  34. package/dist/components/MultiSelect/context.d.ts.map +1 -1
  35. package/dist/components/MultiSelect/index.d.ts +2 -2
  36. package/dist/components/MultiSelect/index.d.ts.map +1 -1
  37. package/dist/components/MultiSelect/index.story.d.ts +2 -2
  38. package/dist/components/MultiSelect/index.story.d.ts.map +1 -1
  39. package/dist/components/Radio/index.d.ts +2 -2
  40. package/dist/components/Radio/index.d.ts.map +1 -1
  41. package/dist/components/SegmentedControl/RadioGroupContext.d.ts +1 -1
  42. package/dist/components/SegmentedControl/RadioGroupContext.d.ts.map +1 -1
  43. package/dist/components/SegmentedControl/index.d.ts +2 -2
  44. package/dist/components/SegmentedControl/index.d.ts.map +1 -1
  45. package/dist/components/Switch/index.d.ts +1 -1
  46. package/dist/components/Switch/index.d.ts.map +1 -1
  47. package/dist/components/TagItem/index.d.ts +1 -1
  48. package/dist/components/TagItem/index.d.ts.map +1 -1
  49. package/dist/components/TextField/index.d.ts +2 -2
  50. package/dist/components/TextField/index.d.ts.map +1 -1
  51. package/dist/core/CharcoalProvider.d.ts +1 -1
  52. package/dist/core/CharcoalProvider.d.ts.map +1 -1
  53. package/dist/core/ComponentAbstraction.d.ts +1 -1
  54. package/dist/core/ComponentAbstraction.d.ts.map +1 -1
  55. package/dist/index.cjs.js +171 -127
  56. package/dist/index.cjs.js.map +1 -1
  57. package/dist/index.esm.js +155 -111
  58. package/dist/index.esm.js.map +1 -1
  59. package/dist/styled.d.ts +77 -75
  60. package/dist/styled.d.ts.map +1 -1
  61. package/package.json +8 -7
  62. package/src/components/DropdownSelector/Divider.tsx +13 -0
  63. package/src/components/DropdownSelector/DropdownPopover.tsx +1 -1
  64. package/src/components/DropdownSelector/ListBoxSection.tsx +60 -0
  65. package/src/components/DropdownSelector/Listbox.tsx +11 -74
  66. package/src/components/DropdownSelector/Option.tsx +66 -0
  67. package/src/components/DropdownSelector/index.story.tsx +9 -14
  68. package/src/components/Icon/index.story.tsx +6 -2
  69. package/src/components/TagItem/index.tsx +5 -3
package/dist/styled.d.ts CHANGED
@@ -1,93 +1,95 @@
1
- export declare const theme: (spec: (o: Record<string, unknown> & Readonly<{
1
+ export declare const theme: (specFn: (o: Record<string, unknown> & Readonly<{
2
2
  bg: Record<string, unknown> & {
3
- readonly transparent: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
4
- readonly background1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
5
- readonly background2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
6
- readonly surface1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
7
- readonly surface2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
8
- readonly surface3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
9
- readonly surface4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
10
- readonly surface6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
11
- readonly surface7: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
12
- readonly surface8: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
13
- readonly surface9: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
14
- readonly surface10: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
15
- readonly link1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
16
- readonly link2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
17
- readonly text1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
18
- readonly text2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
19
- readonly text3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
20
- readonly text4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
21
- readonly text5: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
22
- readonly icon6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
23
- readonly brand: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
24
- readonly assertive: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
25
- readonly warning: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
26
- readonly success: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
27
- readonly updatedItem: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
28
- readonly border: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
3
+ readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
4
+ readonly border: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
5
+ readonly transparent: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
6
+ readonly background1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
7
+ readonly background2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
8
+ readonly surface1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
9
+ readonly surface2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
10
+ readonly surface3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
11
+ readonly surface4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
12
+ readonly surface6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
13
+ readonly surface7: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
14
+ readonly surface8: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
15
+ readonly surface9: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
16
+ readonly surface10: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
17
+ readonly link1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
18
+ readonly link2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
19
+ readonly text1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
20
+ readonly text2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
21
+ readonly text3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
22
+ readonly text4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
23
+ readonly text5: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
24
+ readonly icon6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
25
+ readonly brand: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
26
+ readonly warning: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
27
+ readonly success: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
28
+ readonly updatedItem: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
29
29
  } & {
30
- readonly surface5: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
31
- readonly callToAction: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
30
+ readonly surface5: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
31
+ readonly callToAction: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
32
32
  };
33
33
  font: {
34
- readonly transparent: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
35
- readonly background1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
36
- readonly background2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
37
- readonly surface1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
38
- readonly surface2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
39
- readonly surface3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
40
- readonly surface4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
41
- readonly surface6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
42
- readonly surface7: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
43
- readonly surface8: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
44
- readonly surface9: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
45
- readonly surface10: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
46
- readonly link1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
47
- readonly link2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
48
- readonly text1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
49
- readonly text2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
50
- readonly text3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
51
- readonly text4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
52
- readonly text5: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
53
- readonly icon6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
54
- readonly brand: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
55
- readonly assertive: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
56
- readonly warning: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
57
- readonly success: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
58
- readonly updatedItem: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
59
- readonly border: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
34
+ readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
35
+ readonly border: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
36
+ readonly transparent: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
37
+ readonly background1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
38
+ readonly background2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
39
+ readonly surface1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
40
+ readonly surface2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
41
+ readonly surface3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
42
+ readonly surface4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
43
+ readonly surface6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
44
+ readonly surface7: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
45
+ readonly surface8: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
46
+ readonly surface9: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
47
+ readonly surface10: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
48
+ readonly link1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
49
+ readonly link2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
50
+ readonly text1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
51
+ readonly text2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
52
+ readonly text3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
53
+ readonly text4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
54
+ readonly text5: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
55
+ readonly icon6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
56
+ readonly brand: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
57
+ readonly warning: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
58
+ readonly success: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
59
+ readonly updatedItem: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
60
60
  };
61
61
  }> & {
62
- readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "bold" | "monospace" | "preserveHalfLeading">;
62
+ readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "bold" | "monospace" | "preserveHalfLeading">;
63
63
  } & {
64
- readonly margin: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
65
- readonly padding: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
64
+ readonly margin: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
65
+ readonly padding: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
66
66
  } & {
67
- readonly width: Readonly<{
68
- px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled").Internal;
69
- column: (span: number) => import("@charcoal-ui/styled").Internal;
70
- auto: import("@charcoal-ui/styled").Internal;
71
- full: import("@charcoal-ui/styled").Internal;
72
- }>;
73
67
  readonly height: Readonly<{
74
- px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled").Internal;
75
- column: (span: number) => import("@charcoal-ui/styled").Internal;
76
- auto: import("@charcoal-ui/styled").Internal;
77
- full: import("@charcoal-ui/styled").Internal;
68
+ px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
69
+ column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
70
+ auto: import("@charcoal-ui/styled/dist/internals").Internal;
71
+ full: import("@charcoal-ui/styled/dist/internals").Internal;
72
+ }>;
73
+ readonly width: Readonly<{
74
+ px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
75
+ column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
76
+ auto: import("@charcoal-ui/styled/dist/internals").Internal;
77
+ full: import("@charcoal-ui/styled/dist/internals").Internal;
78
78
  }>;
79
- } & import("@charcoal-ui/styled").Internal & {
80
- readonly disabled: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, never>;
79
+ } & import("@charcoal-ui/styled/dist/internals").Internal & {
80
+ readonly hover: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "press" | "disabled">;
81
+ readonly press: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "disabled">;
82
+ readonly disabled: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
81
83
  } & Readonly<{
82
84
  border: {
83
- readonly default: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "bottom" | "left" | "right" | "top">;
85
+ readonly default: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "bottom" | "left" | "right" | "top">;
84
86
  };
85
87
  }> & Readonly<{
86
- borderRadius: (radius: "none" | 4 | 8 | 16 | 24 | "oval") => import("@charcoal-ui/styled").Internal;
88
+ borderRadius: (radius: "none" | 4 | 8 | 16 | 24 | "oval") => import("@charcoal-ui/styled/dist/internals").Internal;
87
89
  }> & Readonly<{
88
90
  outline: {
89
- readonly default: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "focus">;
90
- readonly assertive: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "focus">;
91
+ readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "focus">;
92
+ readonly default: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "focus">;
91
93
  };
92
- }>) => import("@charcoal-ui/styled").Internal | (false | null | undefined) | (import("@charcoal-ui/styled").Internal | (false | null | undefined))[]) => import("@charcoal-ui/styled").ThemeProp<import("styled-components").DefaultTheme>;
94
+ }>) => import("@charcoal-ui/styled/dist/util").ArrayOrSingle<import("@charcoal-ui/styled/dist/internals").Internal | (false | null | undefined)>) => import("@charcoal-ui/styled").ThemeProp<import("styled-components").DefaultTheme>;
93
95
  //# sourceMappingURL=styled.d.ts.map
package/dist/styled.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0OAAsB,CAAA"}
1
+ {"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAAsB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charcoal-ui/react",
3
- "version": "2.4.0",
3
+ "version": "2.6.0",
4
4
  "license": "Apache-2.0",
5
5
  "main": "./dist/index.cjs.js",
6
6
  "module": "./dist/index.esm.js",
@@ -46,13 +46,13 @@
46
46
  "rimraf": "^3.0.2",
47
47
  "styled-components": "^5.3.3",
48
48
  "tsup": "^6.5.0",
49
- "typescript": "^4.5.5"
49
+ "typescript": "^4.9.5"
50
50
  },
51
51
  "dependencies": {
52
- "@charcoal-ui/icons": "^2.4.0",
53
- "@charcoal-ui/styled": "^2.4.0",
54
- "@charcoal-ui/theme": "^2.4.0",
55
- "@charcoal-ui/utils": "^2.4.0",
52
+ "@charcoal-ui/icons": "^2.6.0",
53
+ "@charcoal-ui/styled": "^2.6.0",
54
+ "@charcoal-ui/theme": "^2.6.0",
55
+ "@charcoal-ui/utils": "^2.6.0",
56
56
  "@react-aria/button": "^3.7.0",
57
57
  "@react-aria/checkbox": "^3.8.0",
58
58
  "@react-aria/dialog": "^3.5.0",
@@ -61,6 +61,7 @@
61
61
  "@react-aria/overlays": "^3.13.0",
62
62
  "@react-aria/radio": "^3.5.0",
63
63
  "@react-aria/select": "^3.9.0",
64
+ "@react-aria/separator": "^3.3.0",
64
65
  "@react-aria/ssr": "^3.5.0",
65
66
  "@react-aria/switch": "^3.4.0",
66
67
  "@react-aria/textfield": "^3.9.0",
@@ -87,5 +88,5 @@
87
88
  "url": "https://github.com/pixiv/charcoal.git",
88
89
  "directory": "packages/react"
89
90
  },
90
- "gitHead": "db58bc1a8e14d5f1ccb6e1e275fa29cfb3ec4972"
91
+ "gitHead": "8579b406b316285a35858512030d2143524ae154"
91
92
  }
package/src/components/DropdownSelector/Divider.tsx ADDED
@@ -0,0 +1,13 @@
1
+ import styled from 'styled-components'
2
+
3
+ export const Divider = styled.div.attrs({ role: 'separator' })`
4
+ display: flex;
5
+
6
+ &:before {
7
+ content: '';
8
+ display: block;
9
+ width: 100%;
10
+ height: 1px;
11
+ background: #00000014;
12
+ }
13
+ `
package/src/components/DropdownSelector/DropdownPopover.tsx CHANGED
@@ -60,7 +60,7 @@ export function DropdownPopover({ children, state, ...props }: Props) {
60
60
  }, [props.value, state.isOpen])
61
61
 
62
62
  return (
63
- <Overlay>
63
+ <Overlay portalContainer={document.body}>
64
64
  <div {...underlayProps} style={{ position: 'fixed', inset: 0 }} />
65
65
  <DropdownPopoverDiv {...popoverProps} ref={ref}>
66
66
  <DismissButton onDismiss={() => state.close()} />
package/src/components/DropdownSelector/ListBoxSection.tsx ADDED
@@ -0,0 +1,60 @@
1
+ import { useListBoxSection } from '@react-aria/listbox'
2
+ import { useSeparator } from '@react-aria/separator'
3
+ import { Node } from '@react-types/shared'
4
+ import React from 'react'
5
+ import { ListState } from 'react-stately'
6
+ import styled from 'styled-components'
7
+ import { Option } from './Option'
8
+ import { Divider } from './Divider'
9
+ import { theme } from '../../styled'
10
+
11
+ export function ListBoxSection<T>(props: {
12
+ section: Node<T>
13
+ state: ListState<T>
14
+ }) {
15
+ const { state } = props
16
+ const { itemProps, headingProps, groupProps } = useListBoxSection({
17
+ heading: props.section.rendered,
18
+ 'aria-label': props.section['aria-label'],
19
+ })
20
+
21
+ const { separatorProps } = useSeparator({
22
+ elementType: 'li',
23
+ })
24
+
25
+ return (
26
+ <>
27
+ {props.section.key !== props.state.collection.getFirstKey() && (
28
+ <Divider {...separatorProps} role="separator" />
29
+ )}
30
+ <StyledLi {...itemProps}>
31
+ {props.section.rendered != null && (
32
+ <SectionSpan {...headingProps}>{props.section.rendered}</SectionSpan>
33
+ )}
34
+ <StyledUl {...groupProps}>
35
+ {[...props.section.childNodes].map((node) => (
36
+ <Option key={node.key} item={node} state={state} />
37
+ ))}
38
+ </StyledUl>
39
+ </StyledLi>
40
+ </>
41
+ )
42
+ }
43
+
44
+ const SectionSpan = styled.span`
45
+ ${theme((o) => [
46
+ o.font.text3,
47
+ o.typography(12).bold,
48
+ o.margin.bottom(8).left(16).top(16),
49
+ ])}
50
+ `
51
+
52
+ const StyledUl = styled.ul`
53
+ padding-left: 0;
54
+ margin: 0;
55
+ box-sizing: border-box;
56
+ list-style: none;
57
+ overflow: hidden;
58
+ `
59
+
60
+ const StyledLi = styled.li``
package/src/components/DropdownSelector/Listbox.tsx CHANGED
@@ -1,16 +1,14 @@
1
1
  import React, { memo, useRef, Fragment, useMemo } from 'react'
2
2
  import styled from 'styled-components'
3
3
  import { ListProps, ListState } from 'react-stately'
4
- import { useListBox, useOption } from '@react-aria/listbox'
5
- import { mergeProps } from '@react-aria/utils'
6
- import { useFocusRing } from '@react-aria/focus'
7
- import { px } from '@charcoal-ui/utils'
8
- import Icon from '../Icon'
4
+ import { useListBox } from '@react-aria/listbox'
9
5
  import { theme } from '../../styled'
10
6
 
11
- import type { Node } from '@react-types/shared'
7
+ import { ListBoxSection } from './ListBoxSection'
8
+ import { Divider } from './Divider'
9
+ import { Option } from './Option'
12
10
 
13
- type ListMode = 'default' | 'separator'
11
+ export type ListMode = 'default' | 'separator'
14
12
  export type ListboxProps<T> = Omit<ListProps<T>, 'children'> & {
15
13
  state: ListState<T>
16
14
  mode?: ListMode
@@ -38,7 +36,11 @@ const Listbox = <T,>({
38
36
  <ListboxRoot ref={ref} {...listBoxProps}>
39
37
  {collection.map(({ node, last }) => (
40
38
  <Fragment key={node.key}>
41
- <Option item={node} state={state} mode={mode} />
39
+ {node.type === 'section' ? (
40
+ <ListBoxSection section={node} state={state} />
41
+ ) : (
42
+ <Option item={node} state={state} mode={mode} />
43
+ )}
42
44
  {!last && mode === 'separator' && <Divider />}
43
45
  </Fragment>
44
46
  ))}
@@ -59,72 +61,7 @@ const ListboxRoot = styled.ul`
59
61
  o.bg.background1,
60
62
  o.border.default,
61
63
  o.borderRadius(8),
64
+ o.padding.vertical(8),
62
65
  o.outline.default.focus,
63
66
  ])}
64
67
  `
65
-
66
- const Divider = styled.div.attrs({ role: 'separator' })`
67
- display: flex;
68
- ${theme((o) => [o.padding.horizontal(8)])}
69
-
70
- &:before {
71
- content: '';
72
- display: block;
73
- width: 100%;
74
- height: 1px;
75
- background: #00000014;
76
- }
77
- `
78
-
79
- type OptionProps<T> = {
80
- item: Node<T>
81
- state: ListState<T>
82
- mode?: ListMode
83
- }
84
-
85
- const Option = <T,>({ item, state, mode }: OptionProps<T>) => {
86
- const ref = useRef<HTMLLIElement>(null)
87
-
88
- const { optionProps, isSelected } = useOption(item, state, ref)
89
- const { focusProps } = useFocusRing()
90
-
91
- return (
92
- <OptionRoot {...mergeProps(optionProps, focusProps)} ref={ref} mode={mode}>
93
- {isSelected && <OptionCheckIcon name="16/Check" />}
94
- <OptionText isSelected={isSelected}>{item.rendered}</OptionText>
95
- </OptionRoot>
96
- )
97
- }
98
-
99
- const OptionRoot = styled.li<{ mode?: ListMode }>`
100
- display: flex;
101
- align-items: center;
102
- gap: ${({ theme }) => px(theme.spacing[4])};
103
- height: 40px;
104
- cursor: pointer;
105
- outline: none;
106
-
107
- ${({ mode }) =>
108
- theme((o) => [
109
- o.padding.horizontal(8),
110
- mode === 'separator' && o.padding.vertical(4),
111
- ])}
112
-
113
- &:focus {
114
- ${theme((o) => [o.bg.surface3])}
115
- }
116
- `
117
- const OptionCheckIcon = styled(Icon)`
118
- ${theme((o) => [o.font.text2])}
119
- `
120
-
121
- const OptionText = styled.span<{ isSelected: boolean }>`
122
- display: block;
123
- ${({ isSelected }) =>
124
- theme((o) => [
125
- o.typography(14),
126
- o.font.text2,
127
- isSelected ? undefined : o.margin.left(16),
128
- isSelected ? undefined : o.padding.left(4),
129
- ])}
130
- `
package/src/components/DropdownSelector/Option.tsx ADDED
@@ -0,0 +1,66 @@
1
+ import React, { useRef } from 'react'
2
+ import styled, { css } from 'styled-components'
3
+ import { ListState } from 'react-stately'
4
+ import { useOption } from '@react-aria/listbox'
5
+ import { mergeProps } from '@react-aria/utils'
6
+ import { useFocusRing } from '@react-aria/focus'
7
+ import { px } from '@charcoal-ui/utils'
8
+ import Icon from '../Icon'
9
+ import { theme } from '../../styled'
10
+ import { Node } from '@react-types/shared'
11
+ import { ListMode } from './Listbox'
12
+
13
+ type OptionProps<T> = {
14
+ item: Node<T>
15
+ state: ListState<T>
16
+ mode?: ListMode
17
+ }
18
+
19
+ export function Option<T>({ item, state, mode }: OptionProps<T>) {
20
+ const ref = useRef<HTMLLIElement>(null)
21
+
22
+ const { optionProps, isSelected } = useOption(item, state, ref)
23
+ const { focusProps } = useFocusRing()
24
+
25
+ return (
26
+ <OptionRoot {...mergeProps(optionProps, focusProps)} ref={ref} mode={mode}>
27
+ <OptionCheckIcon name="16/Check" isSelected={isSelected} />
28
+ <OptionText>{item.rendered}</OptionText>
29
+ </OptionRoot>
30
+ )
31
+ }
32
+
33
+ const OptionRoot = styled.li<{ mode?: ListMode }>`
34
+ display: flex;
35
+ align-items: center;
36
+ gap: ${({ theme }) => px(theme.spacing[4])};
37
+ height: 40px;
38
+ cursor: pointer;
39
+ outline: none;
40
+
41
+ ${({ mode }) =>
42
+ theme((o) => [
43
+ o.padding.horizontal(8),
44
+ mode === 'separator' && o.padding.vertical(4),
45
+ ])}
46
+
47
+ &:focus {
48
+ ${theme((o) => [o.bg.surface3])}
49
+ }
50
+ `
51
+
52
+ const OptionCheckIcon = styled(Icon)<{ isSelected: boolean }>`
53
+ visibility: hidden;
54
+ ${theme((o) => [o.font.text2])}
55
+
56
+ ${({ isSelected }) =>
57
+ isSelected &&
58
+ css`
59
+ visibility: visible;
60
+ `}
61
+ `
62
+
63
+ const OptionText = styled.span`
64
+ display: block;
65
+ ${theme((o) => [o.typography(14), o.font.text2])}
66
+ `
package/src/components/DropdownSelector/index.story.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import { action } from '@storybook/addon-actions'
2
2
  import React, { useState } from 'react'
3
+ import { Section } from 'react-stately'
3
4
  import DropdownSelector, {
4
5
  DropdownSelectorItem,
5
6
  DropdownSelectorProps,
@@ -41,7 +42,7 @@ Default.args = {
41
42
  disabled: false,
42
43
  }
43
44
 
44
- export const Multiple: Story<DropdownSelectorProps> = (props) => {
45
+ export const Sections: Story<DropdownSelectorProps> = (props) => {
45
46
  return (
46
47
  <div>
47
48
  <DropdownSelector
@@ -50,19 +51,13 @@ export const Multiple: Story<DropdownSelectorProps> = (props) => {
50
51
  onChange={action('change')}
51
52
  onOpenChange={action('open')}
52
53
  >
53
- <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
54
- <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
55
- <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
56
- </DropdownSelector>
57
- <DropdownSelector
58
- {...props}
59
- placeholder={'Drop Down menu'}
60
- onChange={action('change')}
61
- onOpenChange={action('open')}
62
- >
63
- <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
64
- <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
65
- <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
54
+ <Section title="Section1">
55
+ <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
56
+ </Section>
57
+ <Section title="Section2">
58
+ <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
59
+ <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
60
+ </Section>
66
61
  </DropdownSelector>
67
62
  </div>
68
63
  )
package/src/components/Icon/index.story.tsx CHANGED
@@ -22,8 +22,12 @@ export default {
22
22
  },
23
23
  }
24
24
 
25
- const Template: Story<IconProps> = (props) => <Icon {...props} />
25
+ // NOTICE: コード生成のタイミングで不当に型エラーが出ることがあるので name を any にする
26
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
27
+ const Template: Story<IconProps & { name: any }> = (props) => (
28
+ <Icon {...props} />
29
+ )
26
30
 
27
- export const Default: Story<IconProps> = Template.bind({})
31
+ export const Default = Template.bind({})
28
32
 
29
33
  Default.args = { name: KNOWN_ICON_FILES[0], scale: 1 }
package/src/components/TagItem/index.tsx CHANGED
@@ -61,7 +61,7 @@ const TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(
61
61
  status={status}
62
62
  {...buttonProps}
63
63
  >
64
- <Background bgColor={bgColor} bgImage={bgImage} />
64
+ <Background bgColor={bgColor} bgImage={bgImage} status={status} />
65
65
 
66
66
  <Inner>
67
67
  <LabelWrapper isTranslate={hasTranslatedLabel}>
@@ -101,7 +101,6 @@ const TagItemRoot = styled.a<TagItemRootProps>`
101
101
  o.borderRadius(4),
102
102
  status !== 'active' && size === 'M' && o.padding.horizontal(24),
103
103
  status !== 'active' && size === 'S' && o.padding.horizontal(16),
104
- status === 'inactive' && o.bg.surface3,
105
104
  status === 'inactive' ? o.font.text2 : o.font.text5,
106
105
  ...(status === 'active' ? [o.padding.left(16), o.padding.right(8)] : []),
107
106
  ])}
@@ -112,7 +111,9 @@ const TagItemRoot = styled.a<TagItemRootProps>`
112
111
  }
113
112
  `
114
113
 
115
- const Background = styled.div<Pick<TagItemProps, 'bgColor' | 'bgImage'>>`
114
+ const Background = styled.div<
115
+ Pick<TagItemProps, 'bgColor' | 'bgImage' | 'status'>
116
+ >`
116
117
  position: absolute;
117
118
  z-index: 1;
118
119
  top: 0;
@@ -121,6 +122,7 @@ const Background = styled.div<Pick<TagItemProps, 'bgColor' | 'bgImage'>>`
121
122
  height: 100%;
122
123
 
123
124
  background-color: ${({ bgColor }) => bgColor};
125
+ ${({ status }) => status === 'inactive' && theme((o) => o.bg.surface3)}
124
126
 
125
127
  ${({ bgImage }) =>
126
128
  bgImage !== undefined &&