<div className={`relative inline-block ${width}`} ref={selectRef}>
{label && (
<label
htmlFor={id}
className={classNames(
disabled ? "text-gray-400" : "text-gray-700",
"block text-sm bg-transparent"
)}
>
{label}
</label>
)}
<div
role="button"
className={`relative flex items-center cursor-${disabled ? 'not-
allowed' : 'pointer'}`}
onClick={() => !disabled && setOpen(!open)}
>
<div
className={classNames(
border && !error && 'border rounded-lg border-gray-400
shadow-sm focus:ring-2 focus:ring-primary-200',
border && error && 'border rounded-lg border-red-600',
`flex-grow flex items-center bg-transparent px-2.5 py-px
rounded h-10 justify-between relative ${classname? classname : ""}`
)}
>
{labelIcon && <Icon icon={labelIcon} color='#667085' />}
{showSelectedLabel && (
<span className={classNames(
disabled ? "text-gray-400 cursor-not-allowed" : "text-
gray-900",
"flex-1 text-md ml-2"
)}>
{selectedLabel}
</span>
)}
{loading && <Loader size='small' color='#667085' />}
{!error && caretDown && <CaretDown size={16} className="ml-1"
color='#667085' />}
{error && xCircle && <XCircle size={16} className="absolute
right-1 text-red-600" />}
</div>
{open && (
<div
role="menu"
className={classNames(
"absolute top-10 right-0 z-10 bg-white border rounded-
md border-gray-200 overflow-y-auto",
`scrollbar-thin scrollbar-thumb-gray-200 scrollbar-
track-transparent scrollbar-track-rounded-md scrollbar-thumb-rounded-md`,
optionDefaultListPosition ? "left-0" : "-left-36",
widthOptions === 'xs' && 'w-0',
widthOptions === 'sm' && 'w-44',
widthOptions === 'md' && 'w-60',
widthOptions === 'lg' && 'w-72',
widthOptions === 'xl' && 'w-96',
maxHeight === 'xs' && 'max-h-[10vh]',
maxHeight === 'sm' && 'max-h-[20vh]',
maxHeight === 'md' && 'max-h-[40vh]',
maxHeight === 'lg' && 'max-h-[60vh]',
maxHeight === 'xl' && 'max-h-[80vh]'
)}
>
{options.map(option => (
<div
key={option.id}
role="menuitem"
data-testid={option.id}
className={classNames(
option.disabled ? "cursor-not-allowed text-
gray-400" : "cursor-pointer",
!option.disabled && "hover:bg-gray-50 rounded-
lg m-0.5 hover:text-gray-900",
selectedOption === option.id && "bg-gray-50
rounded-lg m-0.5 text-gray-900"
)}
onClick={() => !option.disabled &&
handleOptionClick(option.id, option.onClick)}
>
<div className="flex items-center justify-between
px-2 py-2">
{option.icon && <Icon icon={option.icon}
color='#667085' />}
<div className="flex items-center flex-grow ml-
1 mr-1 text-md">
{option.label || ""}
</div>
{selectedOption === option.id && selectedIcon
&& (
<Icon icon="Check" color='#667085' />
)}
</div>
</div>
))}
</div>
)}
</div>
{error && <p className="text-error-600 text-sm">{error}</p>}
</div>
in storybook inside Template return:
/*
<div className="flex items-center justify-center min-h-screen">
<Dropdown
{...args}
onChange={(value) => {
if (value) {
handleOptionClick(value);
// args.onChange && args.onChange(value);
}
args.onChange && args.onChange(value);
}}
/>
{message && <p>{message}</p>}
</div>
*/
additional useEffect in dropdown was:
/*
//additional useEffect to manage select state here
//this useEffect does not touch the component's own flow.if selectState prop
does not exist,this useEffect will not affect so component will be on it's own flow
useEffect(() => {
setSelectedOption(selectState);
}, [selectState]);
*/
