import type { InlineHelpTextProps } from '~/components/InlineHelpText'; import type { BaseProps } from '~/types/component'; import type { Corners } from '~/types/corners'; type AriaAttributes = Omit & Required>; type BaseWithAria = BaseProps & AriaAttributes; export interface SelectProps extends BaseWithAria, Omit { /** * Variant of the select input **/ variant?: 'outlined' | 'solid'; /** * Options to render. */ options: Option[]; /** * On change event to pass to `Select`. */ onChange?: (e: React.ChangeEvent) => void; /** * Label on top left. */ primaryLabel?: React.ReactNode; /** * Label on top right. */ secondaryLabel?: React.ReactNode; /** * Label on bottom left. */ helperText?: React.ReactNode; /** * Marks the input as required and appends an asterisk to the label. * * When set to `'no-indicator'`, the value is required, but an asterisk isn't displayed on the label. */ required?: boolean | 'no-indicator'; /** * Disable Select. */ disabled?: boolean; /** * Width of select, can be either default or fluid. * Default is `200px` */ width?: 'default' | 'fluid'; /** * Specifies border radius for `Select`. Default is `rounded`. */ corners?: Corners; value?: HTMLSelectElement['value']; } interface Option { /** * Option value. */ value: string; /** * Option label. */ label: string; /** * Set option as default. */ defaultSelected?: boolean; /** * Disable only this option (as opposed to disabling the whole select). * * NOTE: You can still manually set the select to have this option's value * programmatically; setting the option as disabled disables the user's * ability to select it. */ disabled?: boolean; } export {};