76 lines
1.7 KiB
TypeScript
76 lines
1.7 KiB
TypeScript
import type { ComponentPropsWithoutRef } from 'react';
|
|
import { forwardRef } from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { FormFieldWrapper } from './form_field_wrapper';
|
|
import type {
|
|
CommonFieldWrapperProps,
|
|
FieldWrapperProps,
|
|
} from './form_field_wrapper';
|
|
import classes from './select.module.scss';
|
|
|
|
interface Props
|
|
extends
|
|
ComponentPropsWithoutRef<'select'>,
|
|
CommonFieldWrapperProps,
|
|
Pick<FieldWrapperProps, 'inputPlacement'> {}
|
|
|
|
/**
|
|
* A simple form field for single-item selections.
|
|
* Provide selectable items via nested `<option>` elements.
|
|
*
|
|
* Accepts an optional `hint` and can be marked as required
|
|
* or optional (by explicitly setting `required={false}`)
|
|
*/
|
|
|
|
export const SelectField = forwardRef<HTMLSelectElement, Props>(
|
|
(
|
|
{
|
|
id,
|
|
label,
|
|
hint,
|
|
required,
|
|
status,
|
|
inputPlacement,
|
|
children,
|
|
wrapperClassName,
|
|
...otherProps
|
|
},
|
|
ref,
|
|
) => (
|
|
<FormFieldWrapper
|
|
label={label}
|
|
hint={hint}
|
|
required={required}
|
|
status={status}
|
|
inputId={id}
|
|
inputPlacement={inputPlacement}
|
|
className={wrapperClassName}
|
|
>
|
|
{(inputProps) => (
|
|
<Select {...otherProps} {...inputProps} ref={ref}>
|
|
{children}
|
|
</Select>
|
|
)}
|
|
</FormFieldWrapper>
|
|
),
|
|
);
|
|
|
|
SelectField.displayName = 'SelectField';
|
|
|
|
export const Select = forwardRef<
|
|
HTMLSelectElement,
|
|
ComponentPropsWithoutRef<'select'>
|
|
>(({ className, size, ...otherProps }, ref) => (
|
|
<div className={classes.wrapper}>
|
|
<select
|
|
{...otherProps}
|
|
className={classNames(className, classes.select)}
|
|
ref={ref}
|
|
/>
|
|
</div>
|
|
));
|
|
|
|
Select.displayName = 'Select';
|