aidos-ui 3.0.24 → 3.0.26
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/Dropdown.d.ts +7 -2
- package/dist/Dropdown.js +5 -5
- package/dist/Dropdown.js.map +1 -1
- package/package.json +1 -1
- package/src/Button.tsx +2 -2
- package/src/Dropdown.tsx +20 -6
package/dist/Dropdown.d.ts
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
import { JSStyle } from "./jss";
|
|
2
|
-
export declare function Dropdown<T>({ id, label, options, selection, setSelection, jsStyle, }: {
|
|
1
|
+
import { Gap, JSStyle, Padding, Size } from "./jss";
|
|
2
|
+
export declare function Dropdown<T extends string | number>({ id, label, options, selection, setSelection, jsStyle, jsStyleButton, optionLabel, padding, size, gap, }: {
|
|
3
3
|
id?: string;
|
|
4
4
|
label: string;
|
|
5
5
|
options: Set<T>;
|
|
6
6
|
setSelection: (selection: T) => void;
|
|
7
7
|
selection: T;
|
|
8
8
|
jsStyle?: JSStyle;
|
|
9
|
+
jsStyleButton?: JSStyle;
|
|
10
|
+
optionLabel: (option: T) => string;
|
|
11
|
+
padding?: Padding;
|
|
12
|
+
gap?: Gap;
|
|
13
|
+
size?: Size;
|
|
9
14
|
}): import("react/jsx-runtime").JSX.Element;
|
package/dist/Dropdown.js
CHANGED
|
@@ -28,7 +28,7 @@ const jsStyles = {
|
|
|
28
28
|
zIndex: 1,
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
|
-
export function Dropdown({ id = guid(), label, options, selection, setSelection, jsStyle, }) {
|
|
31
|
+
export function Dropdown({ id = guid(), label, options, selection, setSelection, jsStyle, jsStyleButton, optionLabel, padding, size, gap = "medium", }) {
|
|
32
32
|
const triggerRef = useRef(null);
|
|
33
33
|
const [expanded, setExpanded] = useState(false);
|
|
34
34
|
const dropdownRef = useNavigation({ autofocus: true });
|
|
@@ -46,19 +46,19 @@ export function Dropdown({ id = guid(), label, options, selection, setSelection,
|
|
|
46
46
|
triggerRef.current && triggerRef.current.focus();
|
|
47
47
|
}
|
|
48
48
|
}, [expanded]);
|
|
49
|
-
return (_jsxs(BaseView, { ref: rootRef, jsStyle: [jsStyles.root, jsStyle], children: [_jsx(Button, { "aria-expanded": expanded ? "true" : "false", "aria-controls": id, "aria-haspopup": "true", "aria-label": label, role: "combobox", justify: "space-between", tabIndex: 0, jsStyle: jsStyles.button, color: "positive", icon: "fa-chevron-down", iconPosition: "right", onClick: () => {
|
|
49
|
+
return (_jsxs(BaseView, { ref: rootRef, jsStyle: [jsStyles.root, jsStyle], children: [_jsx(Button, { size: size, padding: padding, "aria-expanded": expanded ? "true" : "false", "aria-controls": id, "aria-haspopup": "true", "aria-label": label, role: "combobox", justify: "space-between", tabIndex: 0, jsStyle: [jsStyles.button, jsStyleButton], color: "positive", icon: "fa-chevron-down", iconPosition: "right", onClick: () => {
|
|
50
50
|
setExpanded((x) => !x);
|
|
51
|
-
}, ref: triggerRef, children: selection
|
|
51
|
+
}, ref: triggerRef, children: optionLabel(selection) }), expanded && (_jsx(Column, { gap: gap, jsStyle: [jsStyles.dropdown, getBackground("secondary-background")], id: id, role: "listbox", "aria-label": label, tabIndex: -1, ref: dropdownRef, onBlur: (e) => {
|
|
52
52
|
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
53
53
|
setExpanded(false);
|
|
54
54
|
}
|
|
55
55
|
}, children: Array.from(options).map((option, index) => {
|
|
56
56
|
const optionId = `${id}-${index}`;
|
|
57
57
|
const selected = option === selection;
|
|
58
|
-
return (_jsx(Button, { justify: selected ? "space-between" : "flex-start", align: "center", bare: true, iconPosition: "right", icon: selected ? "fa-check" : undefined, role: "option", id: optionId, "aria-selected": selected ? "true" : "false", color: "positive", onClick: () => {
|
|
58
|
+
return (_jsx(Button, { size: size, padding: padding, justify: selected ? "space-between" : "flex-start", align: "center", bare: true, iconPosition: "right", icon: selected ? "fa-check" : undefined, role: "option", id: optionId, "aria-selected": selected ? "true" : "false", color: "positive", onClick: () => {
|
|
59
59
|
setSelection(option);
|
|
60
60
|
setExpanded(false);
|
|
61
|
-
}, children: option
|
|
61
|
+
}, children: optionLabel(option) }, optionId));
|
|
62
62
|
}) }))] }));
|
|
63
63
|
}
|
|
64
64
|
//# sourceMappingURL=Dropdown.js.map
|
package/dist/Dropdown.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/Button.tsx
CHANGED
|
@@ -42,7 +42,7 @@ export const Button = React.forwardRef(
|
|
|
42
42
|
padding = "medium",
|
|
43
43
|
...otherProps
|
|
44
44
|
}: ButtonProps,
|
|
45
|
-
ref?: React.Ref<HTMLButtonElement
|
|
45
|
+
ref?: React.Ref<HTMLButtonElement>
|
|
46
46
|
) => {
|
|
47
47
|
return (
|
|
48
48
|
<BaseButton
|
|
@@ -86,5 +86,5 @@ export const Button = React.forwardRef(
|
|
|
86
86
|
</Row>
|
|
87
87
|
</BaseButton>
|
|
88
88
|
);
|
|
89
|
-
}
|
|
89
|
+
}
|
|
90
90
|
);
|
package/src/Dropdown.tsx
CHANGED
|
@@ -6,7 +6,7 @@ import { Button } from "./Button";
|
|
|
6
6
|
import { Column } from "./Column";
|
|
7
7
|
import { useNavigation } from "./useNavigation";
|
|
8
8
|
import { useRefEffect } from "./useRefEffect";
|
|
9
|
-
import { JSStyle, getBackground } from "./jss";
|
|
9
|
+
import { Gap, JSStyle, Padding, Size, getBackground } from "./jss";
|
|
10
10
|
|
|
11
11
|
const jsStyles: { [key: string]: JSStyle } = {
|
|
12
12
|
root: {
|
|
@@ -29,13 +29,18 @@ const jsStyles: { [key: string]: JSStyle } = {
|
|
|
29
29
|
zIndex: 1,
|
|
30
30
|
},
|
|
31
31
|
};
|
|
32
|
-
export function Dropdown<T>({
|
|
32
|
+
export function Dropdown<T extends string | number>({
|
|
33
33
|
id = guid(),
|
|
34
34
|
label,
|
|
35
35
|
options,
|
|
36
36
|
selection,
|
|
37
37
|
setSelection,
|
|
38
38
|
jsStyle,
|
|
39
|
+
jsStyleButton,
|
|
40
|
+
optionLabel,
|
|
41
|
+
padding,
|
|
42
|
+
size,
|
|
43
|
+
gap = "medium",
|
|
39
44
|
}: {
|
|
40
45
|
id?: string;
|
|
41
46
|
label: string;
|
|
@@ -43,6 +48,11 @@ export function Dropdown<T>({
|
|
|
43
48
|
setSelection: (selection: T) => void;
|
|
44
49
|
selection: T;
|
|
45
50
|
jsStyle?: JSStyle;
|
|
51
|
+
jsStyleButton?: JSStyle;
|
|
52
|
+
optionLabel: (option: T) => string;
|
|
53
|
+
padding?: Padding;
|
|
54
|
+
gap?: Gap;
|
|
55
|
+
size?: Size;
|
|
46
56
|
}) {
|
|
47
57
|
const triggerRef = useRef(null);
|
|
48
58
|
const [expanded, setExpanded] = useState(false);
|
|
@@ -67,6 +77,8 @@ export function Dropdown<T>({
|
|
|
67
77
|
return (
|
|
68
78
|
<BaseView ref={rootRef} jsStyle={[jsStyles.root, jsStyle]}>
|
|
69
79
|
<Button
|
|
80
|
+
size={size}
|
|
81
|
+
padding={padding}
|
|
70
82
|
aria-expanded={expanded ? "true" : "false"}
|
|
71
83
|
aria-controls={id}
|
|
72
84
|
aria-haspopup="true"
|
|
@@ -74,7 +86,7 @@ export function Dropdown<T>({
|
|
|
74
86
|
role="combobox"
|
|
75
87
|
justify="space-between"
|
|
76
88
|
tabIndex={0}
|
|
77
|
-
jsStyle={jsStyles.button}
|
|
89
|
+
jsStyle={[jsStyles.button, jsStyleButton]}
|
|
78
90
|
color="positive"
|
|
79
91
|
icon="fa-chevron-down"
|
|
80
92
|
iconPosition="right"
|
|
@@ -83,11 +95,11 @@ export function Dropdown<T>({
|
|
|
83
95
|
}}
|
|
84
96
|
ref={triggerRef}
|
|
85
97
|
>
|
|
86
|
-
{selection
|
|
98
|
+
{optionLabel(selection)}
|
|
87
99
|
</Button>
|
|
88
100
|
{expanded && (
|
|
89
101
|
<Column
|
|
90
|
-
gap=
|
|
102
|
+
gap={gap}
|
|
91
103
|
jsStyle={[jsStyles.dropdown, getBackground("secondary-background")]}
|
|
92
104
|
id={id}
|
|
93
105
|
role="listbox"
|
|
@@ -105,6 +117,8 @@ export function Dropdown<T>({
|
|
|
105
117
|
const selected = option === selection;
|
|
106
118
|
return (
|
|
107
119
|
<Button
|
|
120
|
+
size={size}
|
|
121
|
+
padding={padding}
|
|
108
122
|
justify={selected ? "space-between" : "flex-start"}
|
|
109
123
|
align="center"
|
|
110
124
|
bare={true}
|
|
@@ -120,7 +134,7 @@ export function Dropdown<T>({
|
|
|
120
134
|
setExpanded(false);
|
|
121
135
|
}}
|
|
122
136
|
>
|
|
123
|
-
{option
|
|
137
|
+
{optionLabel(option)}
|
|
124
138
|
</Button>
|
|
125
139
|
);
|
|
126
140
|
})}
|