@stack-spot/citric-react 0.26.0 → 0.27.1
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/citric.css +54 -3
- package/dist/components/CheckboxGroup.d.ts +15 -1
- package/dist/components/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/CheckboxGroup.js +5 -3
- package/dist/components/CheckboxGroup.js.map +1 -1
- package/dist/components/CitricComponent.d.ts +1 -1
- package/dist/components/CitricComponent.d.ts.map +1 -1
- package/dist/components/RadioGroup.d.ts +13 -1
- package/dist/components/RadioGroup.d.ts.map +1 -1
- package/dist/components/RadioGroup.js +3 -3
- package/dist/components/RadioGroup.js.map +1 -1
- package/dist/components/Select/MultiSelect.d.ts +60 -0
- package/dist/components/Select/MultiSelect.d.ts.map +1 -0
- package/dist/components/Select/MultiSelect.js +84 -0
- package/dist/components/Select/MultiSelect.js.map +1 -0
- package/dist/components/Select/RichSelect.d.ts +1 -1
- package/dist/components/Select/RichSelect.d.ts.map +1 -1
- package/dist/components/Select/RichSelect.js +14 -112
- package/dist/components/Select/RichSelect.js.map +1 -1
- package/dist/components/Select/hooks.d.ts +23 -0
- package/dist/components/Select/hooks.d.ts.map +1 -0
- package/dist/components/Select/hooks.js +114 -0
- package/dist/components/Select/hooks.js.map +1 -0
- package/dist/components/Select/types.d.ts +16 -5
- package/dist/components/Select/types.d.ts.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/utils/checkbox.js +1 -1
- package/dist/utils/checkbox.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CheckboxGroup.tsx +18 -1
- package/src/components/CitricComponent.ts +1 -1
- package/src/components/RadioGroup.tsx +16 -1
- package/src/components/Select/MultiSelect.tsx +205 -0
- package/src/components/Select/RichSelect.tsx +16 -109
- package/src/components/Select/hooks.ts +133 -0
- package/src/components/Select/types.ts +16 -5
- package/src/index.ts +1 -0
- package/src/utils/checkbox.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichSelect.js","sourceRoot":"","sources":["../../../src/components/Select/RichSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"RichSelect.js","sourceRoot":"","sources":["../../../src/components/Select/RichSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
interface OpenPanelEffectParams {
|
|
2
|
+
open: boolean;
|
|
3
|
+
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
4
|
+
setSearch: React.Dispatch<React.SetStateAction<string | undefined>>;
|
|
5
|
+
element: React.MutableRefObject<HTMLDivElement | null>;
|
|
6
|
+
searchable?: boolean;
|
|
7
|
+
}
|
|
8
|
+
interface FocusEffectParams {
|
|
9
|
+
element: React.MutableRefObject<HTMLDivElement | null>;
|
|
10
|
+
focused: boolean;
|
|
11
|
+
setFocused: React.Dispatch<React.SetStateAction<boolean>>;
|
|
12
|
+
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
13
|
+
}
|
|
14
|
+
interface DisabledEffectParams {
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
setFocused: React.Dispatch<React.SetStateAction<boolean>>;
|
|
17
|
+
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
18
|
+
}
|
|
19
|
+
export declare function useOpenPanelEffect({ open, setOpen, setSearch, element, searchable }: OpenPanelEffectParams): void;
|
|
20
|
+
export declare function useFocusEffect({ element, focused, setFocused, setOpen }: FocusEffectParams): void;
|
|
21
|
+
export declare function useDisabledEffect({ disabled, setOpen, setFocused }: DisabledEffectParams): void;
|
|
22
|
+
export {};
|
|
23
|
+
//# sourceMappingURL=hooks.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/Select/hooks.ts"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACvD,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IACpE,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1D,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACxD;AAED,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1D,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACxD;AAGD,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,qBAAqB,QAsE1G;AAGD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,iBAAiB,QA0B1F;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,oBAAoB,QAOxF"}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
/* this runs whenever the selection panel is opened */
|
|
3
|
+
export function useOpenPanelEffect({ open, setOpen, setSearch, element, searchable }) {
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
if (open) {
|
|
6
|
+
setSearch('');
|
|
7
|
+
const selectionPanel = element.current?.querySelector('.selection-panel');
|
|
8
|
+
selectionPanel?.querySelector('.options')?.scrollTo({ top: 0 });
|
|
9
|
+
const getCurrent = () => selectionPanel?.querySelector('.option.focused');
|
|
10
|
+
const scrollTo = (item) => {
|
|
11
|
+
const list = item.closest('.options');
|
|
12
|
+
if (!list)
|
|
13
|
+
return;
|
|
14
|
+
const { top: listTop, height: listHeight } = list.getBoundingClientRect();
|
|
15
|
+
const { height: itemHeight, top: itemTop } = item.getBoundingClientRect();
|
|
16
|
+
const offset = itemTop + list.scrollTop - listTop;
|
|
17
|
+
if ((list.scrollTop + listHeight < offset + itemHeight) || list.scrollTop > offset) {
|
|
18
|
+
list.scrollTo({ top: offset });
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
/* keyboard and mouse controls */
|
|
22
|
+
const listenToMouse = (event) => {
|
|
23
|
+
if (!selectionPanel?.contains(event.target)) {
|
|
24
|
+
setOpen(false);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
const listenToKeyboard = (event) => {
|
|
28
|
+
const isCharacter = event.key.length === 1;
|
|
29
|
+
if (['Escape', 'ArrowUp', 'ArrowDown', 'Enter'].includes(event.key) ||
|
|
30
|
+
(searchable && (isCharacter || event.key === 'Backspace'))) {
|
|
31
|
+
event.preventDefault();
|
|
32
|
+
event.stopPropagation();
|
|
33
|
+
}
|
|
34
|
+
if (event.key === 'Escape')
|
|
35
|
+
setOpen(false);
|
|
36
|
+
if (searchable) {
|
|
37
|
+
if (isCharacter)
|
|
38
|
+
setSearch(v => `${v}${event.key}`);
|
|
39
|
+
if (event.key === 'Backspace')
|
|
40
|
+
setSearch(v => v?.substring(0, v.length - 1));
|
|
41
|
+
}
|
|
42
|
+
if (event.key === 'ArrowDown') {
|
|
43
|
+
const current = getCurrent();
|
|
44
|
+
const next = (current?.nextElementSibling ?? selectionPanel?.querySelector('.option'));
|
|
45
|
+
if (next) {
|
|
46
|
+
current?.classList.remove('focused');
|
|
47
|
+
next.classList.add('focused');
|
|
48
|
+
scrollTo(next);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
if (event.key === 'ArrowUp') {
|
|
52
|
+
const current = getCurrent();
|
|
53
|
+
const prev = (current?.previousElementSibling ?? selectionPanel?.querySelector('.option:last-child'));
|
|
54
|
+
if (prev) {
|
|
55
|
+
current?.classList.remove('focused');
|
|
56
|
+
prev.classList.add('focused');
|
|
57
|
+
scrollTo(prev);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
if (event.key === 'Enter') {
|
|
61
|
+
setTimeout(() => getCurrent()?.click(), 0);
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
// below, we wait 20ms so the same click that opened the select doesn't close it. Removing it will cause problems with selects under
|
|
65
|
+
// labels.
|
|
66
|
+
setTimeout(() => document.addEventListener('click', listenToMouse), 20);
|
|
67
|
+
document.addEventListener('keydown', listenToKeyboard);
|
|
68
|
+
return () => {
|
|
69
|
+
document.removeEventListener('click', listenToMouse);
|
|
70
|
+
document.removeEventListener('keydown', listenToKeyboard);
|
|
71
|
+
getCurrent()?.classList.remove('focused');
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
}, [open]);
|
|
75
|
+
}
|
|
76
|
+
/* this runs whenever the select is focused */
|
|
77
|
+
export function useFocusEffect({ element, focused, setFocused, setOpen }) {
|
|
78
|
+
useEffect(() => {
|
|
79
|
+
if (focused) {
|
|
80
|
+
const listenToMouse = (event) => {
|
|
81
|
+
if (!element.current?.contains(event.target)) {
|
|
82
|
+
setFocused(false);
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
const listenToKeyboard = (event) => {
|
|
86
|
+
if (['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
if (!element.current?.classList.contains('open'))
|
|
89
|
+
setOpen(true);
|
|
90
|
+
}
|
|
91
|
+
if (event.key === 'Tab') {
|
|
92
|
+
setFocused(false);
|
|
93
|
+
if (element.current?.classList.contains('open'))
|
|
94
|
+
setOpen(false);
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
document.addEventListener('click', listenToMouse);
|
|
98
|
+
document.addEventListener('keydown', listenToKeyboard);
|
|
99
|
+
return () => {
|
|
100
|
+
document.removeEventListener('click', listenToMouse);
|
|
101
|
+
document.removeEventListener('keydown', listenToKeyboard);
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
}, [focused]);
|
|
105
|
+
}
|
|
106
|
+
export function useDisabledEffect({ disabled, setOpen, setFocused }) {
|
|
107
|
+
useEffect(() => {
|
|
108
|
+
if (disabled) {
|
|
109
|
+
setOpen(false);
|
|
110
|
+
setFocused(false);
|
|
111
|
+
}
|
|
112
|
+
}, [disabled]);
|
|
113
|
+
}
|
|
114
|
+
//# sourceMappingURL=hooks.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/components/Select/hooks.ts"],"names":[],"mappings":"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"}
|
|
@@ -31,7 +31,7 @@ export interface CommonSelectProps<T> extends WithColorScheme {
|
|
|
31
31
|
* @param option the item to compute a key for.
|
|
32
32
|
* @returns a string key.
|
|
33
33
|
*/
|
|
34
|
-
renderKey?: (
|
|
34
|
+
renderKey?: (option: T) => string | number | undefined;
|
|
35
35
|
/**
|
|
36
36
|
* Whether or not this input is required. This is also used to figure out if an empty option should be rendered or not.
|
|
37
37
|
*
|
|
@@ -72,6 +72,10 @@ export interface CommonSelectProps<T> extends WithColorScheme {
|
|
|
72
72
|
* @default 'rich'
|
|
73
73
|
*/
|
|
74
74
|
type?: 'simple' | 'rich';
|
|
75
|
+
/**
|
|
76
|
+
* A text to show when no option is selected.
|
|
77
|
+
*/
|
|
78
|
+
placeholder?: string;
|
|
75
79
|
}
|
|
76
80
|
export interface SimpleSelectProps<T> extends CommonSelectProps<T> {
|
|
77
81
|
type: 'simple';
|
|
@@ -82,6 +86,9 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
|
|
|
82
86
|
/**
|
|
83
87
|
* Whether or not to render a search field. The search is based on the value returned by `renderLabel`.
|
|
84
88
|
*
|
|
89
|
+
* Attention: when "searchable" is true, make sure to implement `renderLabel` if your options are not strings or number. The search will
|
|
90
|
+
* be performed on the result of this function.
|
|
91
|
+
*
|
|
85
92
|
* @default false
|
|
86
93
|
*/
|
|
87
94
|
searchable?: boolean;
|
|
@@ -89,18 +96,18 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
|
|
|
89
96
|
* A function to render the option in the selectable list.
|
|
90
97
|
*
|
|
91
98
|
* The `renderLabel` function is used if this is not provided.
|
|
92
|
-
* @param
|
|
99
|
+
* @param option the option.
|
|
93
100
|
* @returns the React Node.
|
|
94
101
|
*/
|
|
95
|
-
renderOption?: (
|
|
102
|
+
renderOption?: (option: T | undefined) => React.ReactNode;
|
|
96
103
|
/**
|
|
97
104
|
* A function to render the selected option in the header.
|
|
98
105
|
*
|
|
99
106
|
* The `renderOption` function is used if this is not provided.
|
|
100
|
-
* @param
|
|
107
|
+
* @param option the option.
|
|
101
108
|
* @returns the React Node.
|
|
102
109
|
*/
|
|
103
|
-
renderHeader?: (
|
|
110
|
+
renderHeader?: (option: T | undefined) => React.ReactNode;
|
|
104
111
|
/**
|
|
105
112
|
* The maximum height of the options list in pixels.
|
|
106
113
|
*
|
|
@@ -113,6 +120,10 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
|
|
|
113
120
|
*/
|
|
114
121
|
showArrow?: boolean;
|
|
115
122
|
ref?: React.MutableRefObject<HTMLDivElement>;
|
|
123
|
+
/**
|
|
124
|
+
* Text to show in the header when no option is selected.
|
|
125
|
+
*/
|
|
126
|
+
placeholder?: string;
|
|
116
127
|
}
|
|
117
128
|
export type BaseSelectProps<T> = SimpleSelectProps<T> | RichSelectProps<T>;
|
|
118
129
|
export type SelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange'> & BaseSelectProps<T>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC3D;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;IAC/C;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC3D;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;IAC/C;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IACnF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IAClF;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAChE,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC;CAClE;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAE1E,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -37,6 +37,7 @@ export * from './components/ProgressCircular.js';
|
|
|
37
37
|
export * from './components/RadioGroup.js';
|
|
38
38
|
export * from './components/Rating.js';
|
|
39
39
|
export * from './components/Select/index.js';
|
|
40
|
+
export * from './components/Select/MultiSelect.js';
|
|
40
41
|
export * from './components/SelectBox.js';
|
|
41
42
|
export * from './components/Skeleton.js';
|
|
42
43
|
export * from './components/Slider.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -37,6 +37,7 @@ export * from './components/ProgressCircular.js';
|
|
|
37
37
|
export * from './components/RadioGroup.js';
|
|
38
38
|
export * from './components/Rating.js';
|
|
39
39
|
export * from './components/Select/index.js';
|
|
40
|
+
export * from './components/Select/MultiSelect.js';
|
|
40
41
|
export * from './components/SelectBox.js';
|
|
41
42
|
export * from './components/Skeleton.js';
|
|
42
43
|
export * from './components/Slider.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
|
package/dist/utils/checkbox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAkC5C;;;;GAIG;AACH,MAAM,UAAU,wBAAwB,CAAgB,MAAqC;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,IAAI,EAAE,CAAC,CAAA;IAC7D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiB,CAAA;IACrD,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IACnC,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,gBAAgB,CAAA;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;QAC/C,aAAa,CAAC,OAAO,GAAG,KAAK,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,EAAE,OAAO,EAAE,sBAAsB,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACvD,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,sBAAsB,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAA;QAC3G,MAAM,QAAQ,GAAQ,EAAE,CAAA;QACxB,MAAM,oBAAoB,GAAQ,EAAE,CAAA;QACpC,MAAM,GAAG,GAAG,IAAI,GAAG,EAAwC,CAAA;QAC3D,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;QAC9C,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YAC/B,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,IAAI,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;gBAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;iBAC9C,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACjC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;gBAC5B,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;YACpB,CAAC;QACH,CAAC;QACD,OAAO,EAAE,OAAO,EAAE,CAAC,GAAG,oBAAoB,EAAE,GAAG,QAAQ,CAAC,EAAE,sBAAsB,EAAE,CAAC,CAAI,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACrH,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAE5B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,QAAQ,CAAC,EAAE,CAAC,CAAA;IACd,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO;QACL;;WAEG;QACH,SAAS;QACT;;WAEG;QACH,eAAe;QACf;;WAEG;QACH,MAAM;QACN;;WAEG;QACH,SAAS
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -68,6 +68,18 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
|
|
|
68
68
|
* @returns true if the item should be disabled, false otherwise.
|
|
69
69
|
*/
|
|
70
70
|
isDisabled?: (option: T) => boolean,
|
|
71
|
+
/**
|
|
72
|
+
* The space between options.
|
|
73
|
+
*
|
|
74
|
+
* @default "8px"
|
|
75
|
+
*/
|
|
76
|
+
gap?: string,
|
|
77
|
+
/**
|
|
78
|
+
* If set to false, the checkboxes will have tabIndex = -1.
|
|
79
|
+
*
|
|
80
|
+
* @default true
|
|
81
|
+
*/
|
|
82
|
+
focusable?: boolean,
|
|
71
83
|
}
|
|
72
84
|
|
|
73
85
|
export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseCheckboxGroupProps<T>
|
|
@@ -79,6 +91,8 @@ export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'on
|
|
|
79
91
|
*
|
|
80
92
|
* Tip: if you need to implement features like "search" and "select all", use the hook `useCheckboxGroupControls`.
|
|
81
93
|
*
|
|
94
|
+
* Tip: If you need a checkbox group that doesn't occupy much height, consider using a MultiSelect.
|
|
95
|
+
*
|
|
82
96
|
* @example
|
|
83
97
|
*
|
|
84
98
|
* ```
|
|
@@ -106,6 +120,8 @@ export const CheckboxGroup = withRef(
|
|
|
106
120
|
isDisabled,
|
|
107
121
|
colorScheme,
|
|
108
122
|
style,
|
|
123
|
+
gap = '8px',
|
|
124
|
+
focusable = true,
|
|
109
125
|
...props
|
|
110
126
|
}: CheckboxGroupProps<T>) {
|
|
111
127
|
const items = useMemo(() => {
|
|
@@ -121,6 +137,7 @@ export const CheckboxGroup = withRef(
|
|
|
121
137
|
checked={value.includes(o) || (!isNil(key) && valueKeys.includes(key))}
|
|
122
138
|
onChange={(e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? []))}
|
|
123
139
|
disabled={isDisabled?.(o)}
|
|
140
|
+
tabIndex={focusable ? undefined : -1}
|
|
124
141
|
/>
|
|
125
142
|
return renderItem ? renderItem(checkbox, o) : (
|
|
126
143
|
<CitricComponent tag="label" component={`${appearance}-row`} key={key} colorScheme={colorScheme}>
|
|
@@ -130,6 +147,6 @@ export const CheckboxGroup = withRef(
|
|
|
130
147
|
)
|
|
131
148
|
})
|
|
132
149
|
}, [options, value, name, colorScheme, appearance])
|
|
133
|
-
return <Column {...props} style={{ gap
|
|
150
|
+
return <Column {...props} style={{ gap, ...style }}>{items}</Column>
|
|
134
151
|
},
|
|
135
152
|
)
|
|
@@ -5,7 +5,7 @@ export type CitricComponentName = 'alert' | 'avatar' | 'badge' | 'blockquote' |
|
|
|
5
5
|
'checkbox-row' | 'divider' | 'field-group' | 'form-group' | 'form' | 'icon-box' | 'input' | 'link' | 'pagination' | 'progress-bar' |
|
|
6
6
|
'progress-circular' | 'radio' | 'radio-row' | 'rating' | 'select' | 'select-box' | 'skeleton' | 'slider' | 'switch' | 'switch-row' |
|
|
7
7
|
'table' | 'tabs' | 'accordion' | 'favorite' | 'textarea' | 'avatar-group' | 'labeled-slider' | 'rich-select' | 'tooltip' | 'menu' |
|
|
8
|
-
'circle'
|
|
8
|
+
'circle' | 'multi-select'
|
|
9
9
|
|
|
10
10
|
interface BaseCitricProps extends WithColorScheme, WithColorPalette {
|
|
11
11
|
component: CitricComponentName,
|
|
@@ -63,6 +63,18 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
|
|
|
63
63
|
* @returns true if the item should be disabled, false otherwise.
|
|
64
64
|
*/
|
|
65
65
|
isDisabled?: (option: T) => boolean,
|
|
66
|
+
/**
|
|
67
|
+
* The space between options.
|
|
68
|
+
*
|
|
69
|
+
* @default "8px"
|
|
70
|
+
*/
|
|
71
|
+
gap?: string,
|
|
72
|
+
/**
|
|
73
|
+
* If set to false, the checkboxes will have tabIndex = -1.
|
|
74
|
+
*
|
|
75
|
+
* @default true
|
|
76
|
+
*/
|
|
77
|
+
focusable?: boolean,
|
|
66
78
|
}
|
|
67
79
|
|
|
68
80
|
export type RadioGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRadioGroupProps<T>
|
|
@@ -101,6 +113,8 @@ export const RadioGroup = withRef(
|
|
|
101
113
|
renderItem,
|
|
102
114
|
isDisabled,
|
|
103
115
|
colorScheme,
|
|
116
|
+
gap = '8px',
|
|
117
|
+
focusable = true,
|
|
104
118
|
style,
|
|
105
119
|
...props
|
|
106
120
|
}: RadioGroupProps<T>) {
|
|
@@ -117,6 +131,7 @@ export const RadioGroup = withRef(
|
|
|
117
131
|
checked={value === o || (!isNil(key) && valueKey === key)}
|
|
118
132
|
onChange={() => onChange?.(o)}
|
|
119
133
|
disabled={isDisabled?.(o)}
|
|
134
|
+
tabIndex={focusable ? undefined : -1}
|
|
120
135
|
/>
|
|
121
136
|
return renderItem ? renderItem(radio, o) : (
|
|
122
137
|
<CitricComponent tag="label" component="radio-row" key={key} colorScheme={colorScheme}>
|
|
@@ -126,6 +141,6 @@ export const RadioGroup = withRef(
|
|
|
126
141
|
)
|
|
127
142
|
})
|
|
128
143
|
}, [options, value, name, colorScheme])
|
|
129
|
-
return <Column {...props} style={{ gap
|
|
144
|
+
return <Column {...props} style={{ gap, ...style }}>{items}</Column>
|
|
130
145
|
},
|
|
131
146
|
)
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
import { listToClass } from '@stack-spot/portal-theme'
|
|
2
|
+
import { useTranslate } from '@stack-spot/portal-translate'
|
|
3
|
+
import { useMemo, useRef, useState } from 'react'
|
|
4
|
+
import { useCheckboxGroupControls } from '../../utils/checkbox'
|
|
5
|
+
import { applyCSSVariable } from '../../utils/css'
|
|
6
|
+
import { defaultRenderKey, defaultRenderLabel } from '../../utils/options'
|
|
7
|
+
import { withRef } from '../../utils/react'
|
|
8
|
+
import { Checkbox } from '../Checkbox'
|
|
9
|
+
import { CheckboxGroup } from '../CheckboxGroup'
|
|
10
|
+
import { CitricComponent } from '../CitricComponent'
|
|
11
|
+
import { Input } from '../Input'
|
|
12
|
+
import { Row } from '../layout'
|
|
13
|
+
import { ProgressCircular } from '../ProgressCircular'
|
|
14
|
+
import { useDisabledEffect, useFocusEffect, useOpenPanelEffect } from './hooks'
|
|
15
|
+
import { RichSelectProps } from './types'
|
|
16
|
+
|
|
17
|
+
export interface BaseMultiSelectProps<T> extends
|
|
18
|
+
Omit<RichSelectProps<T>, 'value' | 'onChange' | 'renderHeader' | 'renderLabel' | 'renderOption' | 'required' | 'onFocus' | 'onBlur'> {
|
|
19
|
+
value: T[],
|
|
20
|
+
onChange: (value: T[]) => void,
|
|
21
|
+
/**
|
|
22
|
+
* A function to render the option in the selectable list.
|
|
23
|
+
*
|
|
24
|
+
* The `renderLabel` function is used if this is not provided.
|
|
25
|
+
* @param value the option.
|
|
26
|
+
* @returns the React Node.
|
|
27
|
+
*/
|
|
28
|
+
renderOption?: (option: T) => React.ReactNode,
|
|
29
|
+
/**
|
|
30
|
+
* A function to render the selected options in the header.
|
|
31
|
+
*
|
|
32
|
+
* The `renderOption` function is used if this is not provided.
|
|
33
|
+
* @param value the option.
|
|
34
|
+
* @returns the React Node.
|
|
35
|
+
*/
|
|
36
|
+
renderHeader?: (value: T[]) => React.ReactNode,
|
|
37
|
+
/**
|
|
38
|
+
* A function to render the item label.
|
|
39
|
+
* @example
|
|
40
|
+
* `(option) => option.name`
|
|
41
|
+
* @default "the item's toString() result."
|
|
42
|
+
* @param option the item to render.
|
|
43
|
+
* @returns a React Node to render.
|
|
44
|
+
*/
|
|
45
|
+
renderLabel?: (option: T) => string,
|
|
46
|
+
/**
|
|
47
|
+
* Whether or not to show a checkbox to select all or remove the selection.
|
|
48
|
+
*
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
51
|
+
showSelectAll?: boolean,
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export type MultiSelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange' | 'onFocus' | 'onBlur'> &
|
|
55
|
+
BaseMultiSelectProps<T>
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* A component that looks like a Select and behaves like a CheckboxGroup. This is a component that lets the user select multiple options
|
|
59
|
+
* in a list.
|
|
60
|
+
*
|
|
61
|
+
* Differently than then the component Select, this does not render the native select of the browser. Instead, it renders a series of
|
|
62
|
+
* checkboxes.
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
*
|
|
66
|
+
* ```
|
|
67
|
+
* const options = useMemo(() => [
|
|
68
|
+
* { id: 1, name: 'Option 1' },
|
|
69
|
+
* { id: 2, name: 'Option 2' },
|
|
70
|
+
* { id: 3, name: 'Option 3' },
|
|
71
|
+
* ], [])
|
|
72
|
+
*
|
|
73
|
+
* const [value, setValue] = useState<typeof options>([])
|
|
74
|
+
*
|
|
75
|
+
* return <MultiSelect options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
export const MultiSelect = withRef(
|
|
79
|
+
function MultiSelect<T>({
|
|
80
|
+
ref,
|
|
81
|
+
options,
|
|
82
|
+
value = [],
|
|
83
|
+
onChange,
|
|
84
|
+
renderLabel = defaultRenderLabel,
|
|
85
|
+
renderKey = defaultRenderKey,
|
|
86
|
+
disabled,
|
|
87
|
+
loading,
|
|
88
|
+
renderOption,
|
|
89
|
+
renderHeader,
|
|
90
|
+
searchable,
|
|
91
|
+
maxHeight,
|
|
92
|
+
style,
|
|
93
|
+
className,
|
|
94
|
+
showArrow,
|
|
95
|
+
placeholder,
|
|
96
|
+
showSelectAll,
|
|
97
|
+
...props
|
|
98
|
+
}: MultiSelectProps<T>,
|
|
99
|
+
) {
|
|
100
|
+
const t = useTranslate(dictionary)
|
|
101
|
+
const _element = useRef<HTMLDivElement | null>(null)
|
|
102
|
+
const element = ref ?? _element
|
|
103
|
+
const [open, setOpen] = useState(false)
|
|
104
|
+
const [focused, setFocused] = useState(false)
|
|
105
|
+
const controls = useCheckboxGroupControls({
|
|
106
|
+
options,
|
|
107
|
+
renderKey,
|
|
108
|
+
initialValue: value,
|
|
109
|
+
onChange,
|
|
110
|
+
applyFilter: (filter, option) => renderLabel(option).toLocaleLowerCase().includes(filter.toLocaleLowerCase()),
|
|
111
|
+
})
|
|
112
|
+
|
|
113
|
+
useOpenPanelEffect({ open, setOpen, setSearch: controls.setFilter, element, searchable })
|
|
114
|
+
useFocusEffect({ element, focused, setFocused, setOpen })
|
|
115
|
+
useDisabledEffect({ disabled, setOpen, setFocused })
|
|
116
|
+
|
|
117
|
+
const header = useMemo(() => {
|
|
118
|
+
if (value.length === 0) return <span className="placeholder">{placeholder}</span>
|
|
119
|
+
const reverse = value.reverse()
|
|
120
|
+
return (
|
|
121
|
+
(renderHeader?.(reverse)
|
|
122
|
+
?? (renderOption ? <Row gap="4px">{reverse.map(renderOption)}</Row> : <span>{reverse.map(renderLabel).join(', ')}</span>))
|
|
123
|
+
|| <span></span>
|
|
124
|
+
)}, [value, placeholder])
|
|
125
|
+
|
|
126
|
+
return (
|
|
127
|
+
<CitricComponent
|
|
128
|
+
tag="div"
|
|
129
|
+
component="multi-select"
|
|
130
|
+
style={maxHeight ? applyCSSVariable(style, 'max-height', `${maxHeight}px`) : style}
|
|
131
|
+
className={listToClass([className, showArrow === false && 'hide-arrow', open && 'open', focused && 'focused'])}
|
|
132
|
+
ref={element}
|
|
133
|
+
aria-busy={loading}
|
|
134
|
+
{...props}
|
|
135
|
+
>
|
|
136
|
+
<header
|
|
137
|
+
onClick={(e) => {
|
|
138
|
+
if (disabled) return
|
|
139
|
+
if (!open) e.stopPropagation()
|
|
140
|
+
setFocused(true)
|
|
141
|
+
setOpen(true)
|
|
142
|
+
}}
|
|
143
|
+
onFocus={() => setFocused(true)}
|
|
144
|
+
aria-label={t.accessibilityHelp}
|
|
145
|
+
tabIndex={0}
|
|
146
|
+
className={renderHeader ? 'custom' : undefined}
|
|
147
|
+
>
|
|
148
|
+
{header}
|
|
149
|
+
{loading && <ProgressCircular size="xs" className="loader" />}
|
|
150
|
+
</header>
|
|
151
|
+
<div className="selection-panel" aria-hidden={!open} {...(open ? {} : { inert: 'true' })}>
|
|
152
|
+
{searchable && <div className="search-bar">
|
|
153
|
+
<div data-citric="field-group" className="auto">
|
|
154
|
+
<i data-citric="icon-box" className="citric-icon outline Search"></i>
|
|
155
|
+
<Input type="search" value={controls.filter} onChange={controls.setFilter} aria-label={t.searchAccessibility} />
|
|
156
|
+
</div>
|
|
157
|
+
</div>}
|
|
158
|
+
{showSelectAll && (
|
|
159
|
+
<Checkbox
|
|
160
|
+
className="select-all"
|
|
161
|
+
onChange={checked => checked ? controls.selectAll() : controls.removeSelection()}
|
|
162
|
+
value={controls.isAllSelected}
|
|
163
|
+
>
|
|
164
|
+
{controls.isAllSelected ? t.removeSelection : t.selectAll}
|
|
165
|
+
</Checkbox>
|
|
166
|
+
)}
|
|
167
|
+
<CheckboxGroup
|
|
168
|
+
className="options"
|
|
169
|
+
gap="0"
|
|
170
|
+
options={controls.options}
|
|
171
|
+
onChange={controls.setValue}
|
|
172
|
+
value={controls.value}
|
|
173
|
+
renderKey={controls.renderKey}
|
|
174
|
+
focusable={false}
|
|
175
|
+
renderItem={(checkbox, option) => (
|
|
176
|
+
<CitricComponent
|
|
177
|
+
component="checkbox-row"
|
|
178
|
+
tag="label"
|
|
179
|
+
className={listToClass(['option', controls.isUnfilteredButChecked(option) && 'unfiltered'])}
|
|
180
|
+
>
|
|
181
|
+
{checkbox}
|
|
182
|
+
{renderOption?.(option) ?? renderLabel(option)}
|
|
183
|
+
</CitricComponent>
|
|
184
|
+
)}
|
|
185
|
+
/>
|
|
186
|
+
</div>
|
|
187
|
+
</CitricComponent>
|
|
188
|
+
)
|
|
189
|
+
},
|
|
190
|
+
)
|
|
191
|
+
|
|
192
|
+
const dictionary = {
|
|
193
|
+
en: {
|
|
194
|
+
accessibilityHelp: 'Press the arrow down to select multiple options',
|
|
195
|
+
searchAccessibility: 'Filter the options',
|
|
196
|
+
removeSelection: 'Remove selection',
|
|
197
|
+
selectAll: 'Select all',
|
|
198
|
+
},
|
|
199
|
+
pt: {
|
|
200
|
+
accessibilityHelp: 'Pressione a seta para baixo para selecionar múltiplas opções',
|
|
201
|
+
searchAccessibility: 'Filtre as opções',
|
|
202
|
+
removeSelection: 'Remover seleção',
|
|
203
|
+
selectAll: 'Selecionar todos',
|
|
204
|
+
},
|
|
205
|
+
}
|