2023-02-14 17:49:32 +00:00
|
|
|
import clsx from 'clsx';
|
2022-11-25 17:04:11 +00:00
|
|
|
import React from 'react';
|
2022-03-21 18:09:01 +00:00
|
|
|
|
2022-06-08 16:06:05 +00:00
|
|
|
interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
2023-02-15 21:26:27 +00:00
|
|
|
children: Iterable<React.ReactNode>
|
2022-06-08 16:06:05 +00:00
|
|
|
}
|
|
|
|
|
2022-05-01 04:39:58 +00:00
|
|
|
/** Multiple-select dropdown. */
|
2022-06-08 16:06:05 +00:00
|
|
|
const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
|
2022-07-22 17:30:16 +00:00
|
|
|
const { children, className, ...filteredProps } = props;
|
2022-03-21 18:09:01 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<select
|
|
|
|
ref={ref}
|
2023-02-14 17:49:32 +00:00
|
|
|
className={clsx(
|
|
|
|
'w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm',
|
|
|
|
className,
|
|
|
|
)}
|
2022-03-21 18:09:01 +00:00
|
|
|
{...filteredProps}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</select>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
export default Select;
|