@stack-spot/citric-react 0.27.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 +19 -4
- package/dist/components/Select/MultiSelect.d.ts +22 -24
- package/dist/components/Select/MultiSelect.d.ts.map +1 -1
- package/dist/components/Select/MultiSelect.js +21 -0
- package/dist/components/Select/MultiSelect.js.map +1 -1
- package/dist/components/Select/types.d.ts +3 -0
- package/dist/components/Select/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Select/MultiSelect.tsx +22 -24
- package/src/components/Select/types.ts +3 -0
package/dist/citric.css
CHANGED
|
@@ -1564,10 +1564,25 @@ input[type="range"][data-citric="slider"] {
|
|
|
1564
1564
|
--default-padding: 8px;
|
|
1565
1565
|
header {
|
|
1566
1566
|
outline: none;
|
|
1567
|
-
&:not(.custom)
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1567
|
+
&:not(.custom) {
|
|
1568
|
+
> span, > .row {
|
|
1569
|
+
overflow: hidden;
|
|
1570
|
+
white-space: nowrap;
|
|
1571
|
+
text-overflow: ellipsis;
|
|
1572
|
+
}
|
|
1573
|
+
> .row {
|
|
1574
|
+
position: relative;
|
|
1575
|
+
&:after {
|
|
1576
|
+
content: '';
|
|
1577
|
+
position: absolute;
|
|
1578
|
+
top: 0;
|
|
1579
|
+
bottom: 0;
|
|
1580
|
+
right: 0;
|
|
1581
|
+
width: 50px;
|
|
1582
|
+
pointer-events: none;
|
|
1583
|
+
background: linear-gradient(90deg, transparent 0%, var(--light-300) 100%);;
|
|
1584
|
+
}
|
|
1585
|
+
}
|
|
1571
1586
|
}
|
|
1572
1587
|
}
|
|
1573
1588
|
[data-citric="checkbox-row"] {
|
|
@@ -1,29 +1,7 @@
|
|
|
1
1
|
import { RichSelectProps } from './types.js';
|
|
2
|
-
|
|
3
|
-
* A component that looks like a Select and behaves like a CheckboxGroup. This is a component that lets the user select multiple options
|
|
4
|
-
* in a list.
|
|
5
|
-
*
|
|
6
|
-
* Differently than then the component Select, this does not render the native select of the browser. Instead, it renders a series of
|
|
7
|
-
* checkboxes.
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
*
|
|
11
|
-
* ```
|
|
12
|
-
* const options = useMemo(() => [
|
|
13
|
-
* { id: 1, name: 'Option 1' },
|
|
14
|
-
* { id: 2, name: 'Option 2' },
|
|
15
|
-
* { id: 3, name: 'Option 3' },
|
|
16
|
-
* ], [])
|
|
17
|
-
*
|
|
18
|
-
* const [value, setValue] = useState<typeof options>([])
|
|
19
|
-
*
|
|
20
|
-
* return <MultiSelect options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
|
|
21
|
-
* ```
|
|
22
|
-
*/
|
|
23
|
-
interface BaseMultiSelectProps<T> extends Omit<RichSelectProps<T>, 'value' | 'onChange' | 'renderHeader' | 'renderLabel' | 'renderOption' | 'required' | 'onFocus' | 'onBlur'> {
|
|
2
|
+
export interface BaseMultiSelectProps<T> extends Omit<RichSelectProps<T>, 'value' | 'onChange' | 'renderHeader' | 'renderLabel' | 'renderOption' | 'required' | 'onFocus' | 'onBlur'> {
|
|
24
3
|
value: T[];
|
|
25
4
|
onChange: (value: T[]) => void;
|
|
26
|
-
onFocus: (event: React.FocusEvent<HTMLElement, Element>) => void;
|
|
27
5
|
/**
|
|
28
6
|
* A function to render the option in the selectable list.
|
|
29
7
|
*
|
|
@@ -57,6 +35,26 @@ interface BaseMultiSelectProps<T> extends Omit<RichSelectProps<T>, 'value' | 'on
|
|
|
57
35
|
showSelectAll?: boolean;
|
|
58
36
|
}
|
|
59
37
|
export type MultiSelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange' | 'onFocus' | 'onBlur'> & BaseMultiSelectProps<T>;
|
|
38
|
+
/**
|
|
39
|
+
* A component that looks like a Select and behaves like a CheckboxGroup. This is a component that lets the user select multiple options
|
|
40
|
+
* in a list.
|
|
41
|
+
*
|
|
42
|
+
* Differently than then the component Select, this does not render the native select of the browser. Instead, it renders a series of
|
|
43
|
+
* checkboxes.
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
*
|
|
47
|
+
* ```
|
|
48
|
+
* const options = useMemo(() => [
|
|
49
|
+
* { id: 1, name: 'Option 1' },
|
|
50
|
+
* { id: 2, name: 'Option 2' },
|
|
51
|
+
* { id: 3, name: 'Option 3' },
|
|
52
|
+
* ], [])
|
|
53
|
+
*
|
|
54
|
+
* const [value, setValue] = useState<typeof options>([])
|
|
55
|
+
*
|
|
56
|
+
* return <MultiSelect options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
60
59
|
export declare const MultiSelect: <T>({ ref, options, value, onChange, renderLabel, renderKey, disabled, loading, renderOption, renderHeader, searchable, maxHeight, style, className, showArrow, placeholder, showSelectAll, ...props }: MultiSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
61
|
-
export {};
|
|
62
60
|
//# sourceMappingURL=MultiSelect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/MultiSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC
|
|
1
|
+
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/MultiSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SACvC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IACpI,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9C;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC,GACnH,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW,GACD,CAAC,sMAmBnB,gBAAgB,CAAC,CAAC,CAAC,4CA4FvB,CAAA"}
|
|
@@ -13,6 +13,27 @@ import { Input } from '../Input.js';
|
|
|
13
13
|
import { Row } from '../layout.js';
|
|
14
14
|
import { ProgressCircular } from '../ProgressCircular.js';
|
|
15
15
|
import { useDisabledEffect, useFocusEffect, useOpenPanelEffect } from './hooks.js';
|
|
16
|
+
/**
|
|
17
|
+
* A component that looks like a Select and behaves like a CheckboxGroup. This is a component that lets the user select multiple options
|
|
18
|
+
* in a list.
|
|
19
|
+
*
|
|
20
|
+
* Differently than then the component Select, this does not render the native select of the browser. Instead, it renders a series of
|
|
21
|
+
* checkboxes.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
*
|
|
25
|
+
* ```
|
|
26
|
+
* const options = useMemo(() => [
|
|
27
|
+
* { id: 1, name: 'Option 1' },
|
|
28
|
+
* { id: 2, name: 'Option 2' },
|
|
29
|
+
* { id: 3, name: 'Option 3' },
|
|
30
|
+
* ], [])
|
|
31
|
+
*
|
|
32
|
+
* const [value, setValue] = useState<typeof options>([])
|
|
33
|
+
*
|
|
34
|
+
* return <MultiSelect options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
16
37
|
export const MultiSelect = withRef(function MultiSelect({ ref, options, value = [], onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, disabled, loading, renderOption, renderHeader, searchable, maxHeight, style, className, showArrow, placeholder, showSelectAll, ...props }) {
|
|
17
38
|
const t = useTranslate(dictionary);
|
|
18
39
|
const _element = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.js","sourceRoot":"","sources":["../../../src/components/Select/MultiSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAA;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"MultiSelect.js","sourceRoot":"","sources":["../../../src/components/Select/MultiSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -86,6 +86,9 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
|
|
|
86
86
|
/**
|
|
87
87
|
* Whether or not to render a search field. The search is based on the value returned by `renderLabel`.
|
|
88
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
|
+
*
|
|
89
92
|
* @default false
|
|
90
93
|
*/
|
|
91
94
|
searchable?: boolean;
|
|
@@ -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,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
|
|
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/package.json
CHANGED
|
@@ -14,32 +14,10 @@ import { ProgressCircular } from '../ProgressCircular'
|
|
|
14
14
|
import { useDisabledEffect, useFocusEffect, useOpenPanelEffect } from './hooks'
|
|
15
15
|
import { RichSelectProps } from './types'
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
* A component that looks like a Select and behaves like a CheckboxGroup. This is a component that lets the user select multiple options
|
|
19
|
-
* in a list.
|
|
20
|
-
*
|
|
21
|
-
* Differently than then the component Select, this does not render the native select of the browser. Instead, it renders a series of
|
|
22
|
-
* checkboxes.
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
*
|
|
26
|
-
* ```
|
|
27
|
-
* const options = useMemo(() => [
|
|
28
|
-
* { id: 1, name: 'Option 1' },
|
|
29
|
-
* { id: 2, name: 'Option 2' },
|
|
30
|
-
* { id: 3, name: 'Option 3' },
|
|
31
|
-
* ], [])
|
|
32
|
-
*
|
|
33
|
-
* const [value, setValue] = useState<typeof options>([])
|
|
34
|
-
*
|
|
35
|
-
* return <MultiSelect options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
|
|
36
|
-
* ```
|
|
37
|
-
*/
|
|
38
|
-
interface BaseMultiSelectProps<T> extends
|
|
17
|
+
export interface BaseMultiSelectProps<T> extends
|
|
39
18
|
Omit<RichSelectProps<T>, 'value' | 'onChange' | 'renderHeader' | 'renderLabel' | 'renderOption' | 'required' | 'onFocus' | 'onBlur'> {
|
|
40
19
|
value: T[],
|
|
41
20
|
onChange: (value: T[]) => void,
|
|
42
|
-
onFocus: (event: React.FocusEvent<HTMLElement, Element>) => void,
|
|
43
21
|
/**
|
|
44
22
|
* A function to render the option in the selectable list.
|
|
45
23
|
*
|
|
@@ -73,10 +51,30 @@ interface BaseMultiSelectProps<T> extends
|
|
|
73
51
|
showSelectAll?: boolean,
|
|
74
52
|
}
|
|
75
53
|
|
|
76
|
-
|
|
77
54
|
export type MultiSelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange' | 'onFocus' | 'onBlur'> &
|
|
78
55
|
BaseMultiSelectProps<T>
|
|
79
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
|
+
*/
|
|
80
78
|
export const MultiSelect = withRef(
|
|
81
79
|
function MultiSelect<T>({
|
|
82
80
|
ref,
|
|
@@ -89,6 +89,9 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
|
|
|
89
89
|
/**
|
|
90
90
|
* Whether or not to render a search field. The search is based on the value returned by `renderLabel`.
|
|
91
91
|
*
|
|
92
|
+
* Attention: when "searchable" is true, make sure to implement `renderLabel` if your options are not strings or number. The search will
|
|
93
|
+
* be performed on the result of this function.
|
|
94
|
+
*
|
|
92
95
|
* @default false
|
|
93
96
|
*/
|
|
94
97
|
searchable?: boolean,
|