import React, { SelectHTMLAttributes, forwardRef } from "react"; import { ChevronDownIcon } from "@navikt/aksel-icons"; import { BodyShort, ErrorMessage, Label } from "../../typography"; import { omit } from "../../utils-external"; import { cl } from "../../utils/helpers"; import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon"; import { FormFieldProps, useFormField } from "../useFormField"; export interface SelectProps extends FormFieldProps, Omit, "size" | "multiple"> { /** * Collection of -elements. */ children: React.ReactNode; /** * Sets inline-style on select wrapper. */ style?: React.CSSProperties; /** * Label for select. */ label: React.ReactNode; /** * Shows label and description for screenreaders only. */ hideLabel?: boolean; } /** * A component that displays a select input field. * * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/select) * @see 🏷️ {@link SelectProps} * * @example * ```jsx * * Velg land * Norge * Sverige * Danmark * * ``` */ export const Select = forwardRef( (props, ref) => { const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, readOnly, } = useFormField(props, "select"); const { children, label, className, description, hideLabel = false, style, ...rest } = props; const readOnlyEventHandlers = { onMouseDown: (evt) => { // NOTE: does not prevent click if (readOnly) { evt.preventDefault(); // focus on the element as per readonly input behavior evt.target.focus(); } }, onKeyDown: (evt) => { if ( readOnly && ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", " "].includes( evt.key, ) ) { evt.preventDefault(); } }, }; return ( {readOnly && } {label} {!!description && ( {description} )} {children} {showErrorMsg && ( {props.error} )} ); }, ); export default Select;