diff --git a/packages/core/src/components/Select/Select.stories.tsx b/packages/core/src/components/Select/Select.stories.tsx index d26f689d34..38acb46c10 100644 --- a/packages/core/src/components/Select/Select.stories.tsx +++ b/packages/core/src/components/Select/Select.stories.tsx @@ -37,4 +37,15 @@ const SELECT_ITEMS = [ }, ]; -export const Default = () => +); + +export const Multiple = () => ( + setOpening(false)} - onClose={() => setOpening(true)} + onClick={selectHandleOnOpen} + open={canOpen} input={} - IconComponent={() => (isOpen ? : )} + renderValue={selected => + multiple && (value as any[]).length !== 0 ? ( +
+ {(selected as string[]).map(selectedValue => ( + el.value === selectedValue)?.label} + label={items.find(el => el.value === selectedValue)?.label} + clickable + onDelete={handleDelete(selectedValue)} + className={classes.chip} + /> + ))} +
+ ) : ( + + {(value as any[]).length === 0 + ? placeholder || '' + : items.find(el => el.value === selected)?.label} + + ) + } + IconComponent={() => + !canOpen ? : + } MenuProps={{ anchorOrigin: { vertical: 'bottom', @@ -123,9 +169,21 @@ export const SelectComponent = (props: Props) => { getContentAnchorEl: null, }} > + {placeholder && ( + + {placeholder} + + )} {items && items.map(item => ( + {multiple && ( + + )} {item.label} ))}