w-design-system 0.0.54 → 0.0.56
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/DatePicker/index.d.ts +1 -0
- package/dist/components/DatePicker/index.d.ts.map +1 -1
- package/dist/components/Select/index.d.ts +3 -0
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +62 -7
- package/dist/components/Select/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Select/index.tsx +100 -26
|
@@ -16,6 +16,7 @@ export declare const DatePicker: <T extends GetElementType<DateRangePickerProps[
|
|
|
16
16
|
text: string;
|
|
17
17
|
id: number;
|
|
18
18
|
icon?: React.ReactNode;
|
|
19
|
+
badge?: string | number;
|
|
19
20
|
}>({ onSelectedCustomDate, customDate, ...props }: DatePickerProps<T>) => React.JSX.Element;
|
|
20
21
|
export {};
|
|
21
22
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAE1E,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAE1D,MAAM,WAAW,eAAe,CAC9B,CAAC,SAAS,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC,GAAG,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC,CAC3G,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,UAAU,EAAE,IAAI,GAAG,IAAI,CAAA;IACvB,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;CACnD;AAED,eAAO,MAAM,UAAU,GACrB,CAAC,SAAS,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAE1E,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAE1D,MAAM,WAAW,eAAe,CAC9B,CAAC,SAAS,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC,GAAG,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC,CAC3G,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,UAAU,EAAE,IAAI,GAAG,IAAI,CAAA;IACvB,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;CACnD;AAED,eAAO,MAAM,UAAU,GACrB,CAAC,SAAS,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;;;;;mDAKxD,eAAe,CAAC,CAAC,CAAC,sBAapB,CAAA"}
|
|
@@ -3,10 +3,12 @@ export interface SelectProps<T extends {
|
|
|
3
3
|
text: string;
|
|
4
4
|
id: number;
|
|
5
5
|
icon?: ReactNode;
|
|
6
|
+
badge?: string | number;
|
|
6
7
|
} = {
|
|
7
8
|
text: string;
|
|
8
9
|
id: number;
|
|
9
10
|
icon?: ReactNode;
|
|
11
|
+
badge?: string | number;
|
|
10
12
|
}> extends HTMLAttributes<HTMLDivElement> {
|
|
11
13
|
disabled?: boolean;
|
|
12
14
|
label?: string;
|
|
@@ -29,6 +31,7 @@ export declare const Select: <T extends {
|
|
|
29
31
|
text: string;
|
|
30
32
|
id: number;
|
|
31
33
|
icon?: ReactNode;
|
|
34
|
+
badge?: any;
|
|
32
35
|
}>(props: PropsWithChildren<SelectProps<T>> & {
|
|
33
36
|
ref?: React.ForwardedRef<SelectRef>;
|
|
34
37
|
}) => React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EAMV,MAAM,OAAO,CAAA;AASd,MAAM,WAAW,WAAW,CAC1B,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EAMV,MAAM,OAAO,CAAA;AASd,MAAM,WAAW,WAAW,CAC1B,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG;IAClF,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CACD,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CAC7B;AAuOD,eAAO,MAAM,MAAM,EAAwC,CACzD,CAAqE,SAA3D;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAA;CAAE,EAErE,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;CAAE,KAC/E,KAAK,CAAC,YAAY,CAAA"}
|
|
@@ -97,17 +97,72 @@ const SelectFowardRef = (_a, ref) => {
|
|
|
97
97
|
}
|
|
98
98
|
return items;
|
|
99
99
|
}, [options, usingInput, disableSearch, computedValue]);
|
|
100
|
+
const dropdownRef = useRef(null);
|
|
101
|
+
const optionRefs = useRef([]);
|
|
102
|
+
const [highlightedIndex, setHighlightedIndex] = useState(null);
|
|
103
|
+
useEffect(() => {
|
|
104
|
+
if (!open) {
|
|
105
|
+
setHighlightedIndex(null);
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
const handleKeyDown = (event) => {
|
|
109
|
+
if (!filteredOptions.length)
|
|
110
|
+
return;
|
|
111
|
+
if (event.key === 'ArrowDown') {
|
|
112
|
+
event.preventDefault();
|
|
113
|
+
setHighlightedIndex(prevIndex => {
|
|
114
|
+
const nextIndex = prevIndex === null || prevIndex === filteredOptions.length - 1 ? 0 : prevIndex + 1;
|
|
115
|
+
scrollIntoView(nextIndex);
|
|
116
|
+
return nextIndex;
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
if (event.key === 'ArrowUp') {
|
|
120
|
+
event.preventDefault();
|
|
121
|
+
setHighlightedIndex(prevIndex => {
|
|
122
|
+
const nextIndex = prevIndex === null || prevIndex === 0 ? filteredOptions.length - 1 : prevIndex - 1;
|
|
123
|
+
scrollIntoView(nextIndex);
|
|
124
|
+
return nextIndex;
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
if (event.key === 'Enter' && highlightedIndex !== null) {
|
|
128
|
+
event.preventDefault();
|
|
129
|
+
onOptionClick(filteredOptions[highlightedIndex]);
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
const scrollIntoView = (index) => {
|
|
133
|
+
const option = optionRefs.current[index];
|
|
134
|
+
if (option && dropdownRef.current) {
|
|
135
|
+
option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
136
|
+
}
|
|
137
|
+
};
|
|
138
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
139
|
+
return () => {
|
|
140
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
141
|
+
};
|
|
142
|
+
}, [open, filteredOptions, highlightedIndex]);
|
|
100
143
|
return (React.createElement(SelectWrapper, Object.assign({}, props, { ref: wrapperRef }),
|
|
101
144
|
React.createElement(Input, { disabled: disabled, leftIcon: leftIcon, rightIcon: React.createElement(React.Fragment, null,
|
|
102
145
|
rightIcon,
|
|
103
|
-
React.createElement(IconWrapper, { className: `icon ${open ? 'icon-rotate' : ''}`, src: chevronDownSVG, width: "16px", color: theme.colors.shade30 })), placeholder: placeholder, label: label, value: computedValue, readonly: !open, onChange: onInputChange, onClick: () =>
|
|
104
|
-
|
|
146
|
+
React.createElement(IconWrapper, { className: `icon ${open ? 'icon-rotate' : ''}`, src: chevronDownSVG, width: "16px", color: theme.colors.shade30 })), placeholder: placeholder, label: label, value: computedValue, readonly: !open, onChange: onInputChange, onClick: () => {
|
|
147
|
+
if (!disabled) {
|
|
148
|
+
setComputedValue('');
|
|
149
|
+
setUsingInput(true);
|
|
150
|
+
setOpen(true);
|
|
151
|
+
}
|
|
152
|
+
} }),
|
|
153
|
+
open && (React.createElement(DropdownWrapper, { ref: dropdownRef },
|
|
105
154
|
React.createElement(Dropdown, { dropDownTop: props.dropDownTop, dropDownWidth: dropDownWidth, dropDownMaxHeight: props.dropDownMaxHeight },
|
|
106
|
-
((_b = options === null || options === void 0 ? void 0 : options.length) !== null && _b !== void 0 ? _b : 0) > 0 && (React.createElement("div", null, filteredOptions.map(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
option.
|
|
110
|
-
|
|
155
|
+
((_b = options === null || options === void 0 ? void 0 : options.length) !== null && _b !== void 0 ? _b : 0) > 0 && (React.createElement("div", null, filteredOptions.map((option, index) => {
|
|
156
|
+
const isSelected = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id;
|
|
157
|
+
const isHighlighted = highlightedIndex === index;
|
|
158
|
+
return (React.createElement(OptionButton, { selected: isSelected, key: option.id, onClick: () => onOptionClick(option), ref: el => (optionRefs.current[index] = el), style: {
|
|
159
|
+
backgroundColor: isHighlighted ? theme.colors.shade20 : 'transparent',
|
|
160
|
+
} }, (option === null || option === void 0 ? void 0 : option.badge) ? (React.createElement(OptionTextBadge, null,
|
|
161
|
+
React.createElement("div", null, option.text),
|
|
162
|
+
React.createElement(Paragraph, { strongBod: true, color: theme.colors.honey30 }, option.badge))) : (React.createElement(React.Fragment, null,
|
|
163
|
+
option.icon,
|
|
164
|
+
React.createElement(OptionText, null, option.text)))));
|
|
165
|
+
}))),
|
|
111
166
|
children)))));
|
|
112
167
|
};
|
|
113
168
|
export const Select = React.forwardRef(SelectFowardRef);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAIZ,SAAS,EACT,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -17,7 +17,12 @@ import { theme } from '../Themes'
|
|
|
17
17
|
import { Dropdown, DropdownWrapper, OptionButton, OptionText, OptionTextBadge, SelectWrapper } from './styles'
|
|
18
18
|
|
|
19
19
|
export interface SelectProps<
|
|
20
|
-
T extends { text: string; id: number; icon?: ReactNode
|
|
20
|
+
T extends { text: string; id: number; icon?: ReactNode; badge?: string | number } = {
|
|
21
|
+
text: string
|
|
22
|
+
id: number
|
|
23
|
+
icon?: ReactNode
|
|
24
|
+
badge?: string | number
|
|
25
|
+
},
|
|
21
26
|
> extends HTMLAttributes<HTMLDivElement> {
|
|
22
27
|
disabled?: boolean
|
|
23
28
|
label?: string
|
|
@@ -38,7 +43,7 @@ export interface SelectRef {
|
|
|
38
43
|
setOpen(open: boolean): void
|
|
39
44
|
}
|
|
40
45
|
|
|
41
|
-
const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode; badge?:
|
|
46
|
+
const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode; badge?: any }>(
|
|
42
47
|
{
|
|
43
48
|
children,
|
|
44
49
|
label,
|
|
@@ -137,6 +142,58 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode;
|
|
|
137
142
|
return items
|
|
138
143
|
}, [options, usingInput, disableSearch, computedValue])
|
|
139
144
|
|
|
145
|
+
const dropdownRef = useRef<HTMLDivElement>(null)
|
|
146
|
+
const optionRefs = useRef<(HTMLButtonElement | null)[]>([])
|
|
147
|
+
|
|
148
|
+
const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null)
|
|
149
|
+
|
|
150
|
+
useEffect(() => {
|
|
151
|
+
if (!open) {
|
|
152
|
+
setHighlightedIndex(null)
|
|
153
|
+
return
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
const handleKeyDown = (event: KeyboardEvent) => {
|
|
157
|
+
if (!filteredOptions.length) return
|
|
158
|
+
|
|
159
|
+
if (event.key === 'ArrowDown') {
|
|
160
|
+
event.preventDefault()
|
|
161
|
+
setHighlightedIndex(prevIndex => {
|
|
162
|
+
const nextIndex = prevIndex === null || prevIndex === filteredOptions.length - 1 ? 0 : prevIndex + 1
|
|
163
|
+
scrollIntoView(nextIndex)
|
|
164
|
+
return nextIndex
|
|
165
|
+
})
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
if (event.key === 'ArrowUp') {
|
|
169
|
+
event.preventDefault()
|
|
170
|
+
setHighlightedIndex(prevIndex => {
|
|
171
|
+
const nextIndex = prevIndex === null || prevIndex === 0 ? filteredOptions.length - 1 : prevIndex - 1
|
|
172
|
+
scrollIntoView(nextIndex)
|
|
173
|
+
return nextIndex
|
|
174
|
+
})
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
if (event.key === 'Enter' && highlightedIndex !== null) {
|
|
178
|
+
event.preventDefault()
|
|
179
|
+
onOptionClick(filteredOptions[highlightedIndex])
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
const scrollIntoView = (index: number) => {
|
|
184
|
+
const option = optionRefs.current[index]
|
|
185
|
+
if (option && dropdownRef.current) {
|
|
186
|
+
option.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
document.addEventListener('keydown', handleKeyDown)
|
|
191
|
+
|
|
192
|
+
return () => {
|
|
193
|
+
document.removeEventListener('keydown', handleKeyDown)
|
|
194
|
+
}
|
|
195
|
+
}, [open, filteredOptions, highlightedIndex])
|
|
196
|
+
|
|
140
197
|
return (
|
|
141
198
|
<SelectWrapper {...props} ref={wrapperRef}>
|
|
142
199
|
<Input
|
|
@@ -158,10 +215,16 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode;
|
|
|
158
215
|
value={computedValue}
|
|
159
216
|
readonly={!open}
|
|
160
217
|
onChange={onInputChange}
|
|
161
|
-
onClick={() =>
|
|
218
|
+
onClick={() => {
|
|
219
|
+
if (!disabled) {
|
|
220
|
+
setComputedValue('')
|
|
221
|
+
setUsingInput(true)
|
|
222
|
+
setOpen(true)
|
|
223
|
+
}
|
|
224
|
+
}}
|
|
162
225
|
/>
|
|
163
226
|
{open && (
|
|
164
|
-
<DropdownWrapper>
|
|
227
|
+
<DropdownWrapper ref={dropdownRef}>
|
|
165
228
|
<Dropdown
|
|
166
229
|
dropDownTop={props.dropDownTop}
|
|
167
230
|
dropDownWidth={dropDownWidth}
|
|
@@ -169,27 +232,36 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode;
|
|
|
169
232
|
>
|
|
170
233
|
{(options?.length ?? 0) > 0 && (
|
|
171
234
|
<div>
|
|
172
|
-
{filteredOptions.map(option =>
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
235
|
+
{filteredOptions.map((option, index) => {
|
|
236
|
+
const isSelected = selectedOption?.id === option.id
|
|
237
|
+
const isHighlighted = highlightedIndex === index
|
|
238
|
+
|
|
239
|
+
return (
|
|
240
|
+
<OptionButton
|
|
241
|
+
selected={isSelected}
|
|
242
|
+
key={option.id}
|
|
243
|
+
onClick={() => onOptionClick(option)}
|
|
244
|
+
ref={el => (optionRefs.current[index] = el)}
|
|
245
|
+
style={{
|
|
246
|
+
backgroundColor: isHighlighted ? theme.colors.shade20 : 'transparent',
|
|
247
|
+
}}
|
|
248
|
+
>
|
|
249
|
+
{option?.badge ? (
|
|
250
|
+
<OptionTextBadge>
|
|
251
|
+
<div>{option.text}</div>
|
|
252
|
+
<Paragraph strongBod color={theme.colors.honey30}>
|
|
253
|
+
{option.badge}
|
|
254
|
+
</Paragraph>
|
|
255
|
+
</OptionTextBadge>
|
|
256
|
+
) : (
|
|
257
|
+
<>
|
|
258
|
+
{option.icon}
|
|
259
|
+
<OptionText>{option.text}</OptionText>
|
|
260
|
+
</>
|
|
261
|
+
)}
|
|
262
|
+
</OptionButton>
|
|
263
|
+
)
|
|
264
|
+
})}
|
|
193
265
|
</div>
|
|
194
266
|
)}
|
|
195
267
|
{children}
|
|
@@ -200,6 +272,8 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode;
|
|
|
200
272
|
)
|
|
201
273
|
}
|
|
202
274
|
|
|
203
|
-
export const Select = React.forwardRef(SelectFowardRef) as <
|
|
275
|
+
export const Select = React.forwardRef(SelectFowardRef) as <
|
|
276
|
+
T extends { text: string; id: number; icon?: ReactNode; badge?: any },
|
|
277
|
+
>(
|
|
204
278
|
props: PropsWithChildren<SelectProps<T>> & { ref?: React.ForwardedRef<SelectRef> },
|
|
205
279
|
) => React.ReactElement
|