const { members, componentOwnerId, assignee, setAssignee, placeholder } = props; const SelectTrigger = styled("Select.Trigger")` display: flex; flex-direction: row; align-items: center; height: 31px; background-color: #373d43; color: #fff; font-family: Helvetica Neue; font-size: 14px; font-weight: 400; line-height: 21px; letter-spacing: 0em; border: none; border-radis: 0.5rem; gap: 0.25rem; :focus { outline-color: transparent; outline-style: solid; outline-width: 1px; } margin-left: 1rem; `; const SelectGroup = styled("Select.Group")` display: flex; flex-direction: column; padding: 16px; background-color: #0e0e10; color: #777583; width: 328px; border-radius: 0.5rem; z-index: 20; `; const SelectItem = styled("Select.Item")` display: flex; column-gap: 0.5rem; :hover { background-color: #d0fc42; } border: none; :focus { outline-color: transparent; outline-style: solid; outline-width: 1px; } padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.25rem; `; const SelectedMember = styled.div` display: flex; column-gap: 0.5rem; padding: 0.5rem; `; const Header = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 1rem; `; const ResetButton = styled.div` background-color: transparent; :hover { color: #fff; } `; const Text = styled.div` padding: 0; margin: 0; `; const accountId = context.accountId; members = members.filter((member) => member.id !== accountId); const label = "Assign to task"; return ( <Select.Root value={assignee} onValueChange={setAssignee}> <SelectTrigger> <Select.Value value={assignee}> {assignee !== placeholder ? ( <SelectedMember> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.UserProfileIcon`} props={{ accountId: assignee, componentOwnerId, }} /> <Text>{assignee}</Text> </SelectedMember> ) : ( assignee )} </Select.Value> <Select.Icon> <i className="bi bi-caret-down-fill"></i> </Select.Icon> </SelectTrigger> <Select.Content position="popper" sideOffset={10}> <Select.Viewport> <SelectGroup> <Header> <Select.Label>{label}</Select.Label> <ResetButton type="button" onClick={(e) => { setAssignee(placeholder); }} > <i className="bi bi-x"></i> </ResetButton> </Header> <SelectItem id={accountId} key={accountId} value={accountId} ref="forwardedRef" > <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.UserProfileIcon`} props={{ accountId: accountId, componentOwnerId, }} /> <Select.ItemText>Assign to me</Select.ItemText> <Select.ItemIndicator> <i className="bi bi-check"></i> </Select.ItemIndicator> </SelectItem> {members?.map((member, id) => ( <SelectItem id={id} key={id} value={member.id} ref="forwardedRef"> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.UserProfileIcon`} props={{ accountId: member.id, componentOwnerId, }} /> <Select.ItemText>{member.id}</Select.ItemText> </SelectItem> ))} </SelectGroup> </Select.Viewport> </Select.Content> </Select.Root> );