@charcoal-ui/react 2.4.0 → 2.5.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.
- package/dist/components/DropdownSelector/Divider.d.ts +4 -0
- package/dist/components/DropdownSelector/Divider.d.ts.map +1 -0
- package/dist/components/DropdownSelector/ListBoxSection.d.ts +7 -0
- package/dist/components/DropdownSelector/ListBoxSection.d.ts.map +1 -0
- package/dist/components/DropdownSelector/Listbox.d.ts +1 -1
- package/dist/components/DropdownSelector/Listbox.d.ts.map +1 -1
- package/dist/components/DropdownSelector/Option.d.ts +11 -0
- package/dist/components/DropdownSelector/Option.d.ts.map +1 -0
- package/dist/components/DropdownSelector/index.story.d.ts +1 -1
- package/dist/components/DropdownSelector/index.story.d.ts.map +1 -1
- package/dist/index.cjs.js +171 -127
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +155 -111
- package/dist/index.esm.js.map +1 -1
- package/dist/styled.d.ts +75 -73
- package/dist/styled.d.ts.map +1 -1
- package/package.json +7 -6
- package/src/components/DropdownSelector/Divider.tsx +13 -0
- package/src/components/DropdownSelector/DropdownPopover.tsx +1 -1
- package/src/components/DropdownSelector/ListBoxSection.tsx +60 -0
- package/src/components/DropdownSelector/Listbox.tsx +11 -74
- package/src/components/DropdownSelector/Option.tsx +66 -0
- package/src/components/DropdownSelector/index.story.tsx +9 -14
- package/src/components/TagItem/index.tsx +5 -3
package/dist/styled.d.ts
CHANGED
|
@@ -1,93 +1,95 @@
|
|
|
1
|
-
export declare const theme: (
|
|
1
|
+
export declare const theme: (specFn: (o: Record<string, unknown> & Readonly<{
|
|
2
2
|
bg: Record<string, unknown> & {
|
|
3
|
-
readonly
|
|
4
|
-
readonly
|
|
5
|
-
readonly
|
|
6
|
-
readonly
|
|
7
|
-
readonly
|
|
8
|
-
readonly
|
|
9
|
-
readonly
|
|
10
|
-
readonly
|
|
11
|
-
readonly
|
|
12
|
-
readonly
|
|
13
|
-
readonly
|
|
14
|
-
readonly
|
|
15
|
-
readonly
|
|
16
|
-
readonly
|
|
17
|
-
readonly
|
|
18
|
-
readonly
|
|
19
|
-
readonly
|
|
20
|
-
readonly
|
|
21
|
-
readonly
|
|
22
|
-
readonly
|
|
23
|
-
readonly
|
|
24
|
-
readonly
|
|
25
|
-
readonly
|
|
26
|
-
readonly
|
|
27
|
-
readonly
|
|
28
|
-
readonly
|
|
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").
|
|
31
|
-
readonly callToAction: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled").
|
|
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
|
|
35
|
-
readonly
|
|
36
|
-
readonly
|
|
37
|
-
readonly
|
|
38
|
-
readonly
|
|
39
|
-
readonly
|
|
40
|
-
readonly
|
|
41
|
-
readonly
|
|
42
|
-
readonly
|
|
43
|
-
readonly
|
|
44
|
-
readonly
|
|
45
|
-
readonly
|
|
46
|
-
readonly
|
|
47
|
-
readonly
|
|
48
|
-
readonly
|
|
49
|
-
readonly
|
|
50
|
-
readonly
|
|
51
|
-
readonly
|
|
52
|
-
readonly
|
|
53
|
-
readonly
|
|
54
|
-
readonly
|
|
55
|
-
readonly
|
|
56
|
-
readonly
|
|
57
|
-
readonly
|
|
58
|
-
readonly
|
|
59
|
-
readonly
|
|
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").
|
|
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").
|
|
65
|
-
readonly padding: import("@charcoal-ui/styled").
|
|
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
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;
|
|
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
72
|
}>;
|
|
73
73
|
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;
|
|
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
|
|
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").
|
|
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
|
|
90
|
-
readonly
|
|
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").
|
|
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
|
|
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.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"main": "./dist/index.cjs.js",
|
|
6
6
|
"module": "./dist/index.esm.js",
|
|
@@ -49,10 +49,10 @@
|
|
|
49
49
|
"typescript": "^4.5.5"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@charcoal-ui/icons": "^2.
|
|
53
|
-
"@charcoal-ui/styled": "^2.
|
|
54
|
-
"@charcoal-ui/theme": "^2.
|
|
55
|
-
"@charcoal-ui/utils": "^2.
|
|
52
|
+
"@charcoal-ui/icons": "^2.5.0",
|
|
53
|
+
"@charcoal-ui/styled": "^2.5.0",
|
|
54
|
+
"@charcoal-ui/theme": "^2.5.0",
|
|
55
|
+
"@charcoal-ui/utils": "^2.5.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": "
|
|
91
|
+
"gitHead": "f2d6f530bbc4467e9205a4e70ce65a57372860a8"
|
|
91
92
|
}
|
|
@@ -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()} />
|
|
@@ -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``
|
|
@@ -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
|
|
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
|
|
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
|
-
|
|
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
|
-
`
|
|
@@ -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
|
+
`
|
|
@@ -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
|
|
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
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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
|
)
|
|
@@ -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<
|
|
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 &&
|