diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx index 3718ee97..5cec8052 100644 --- a/src/picker/Picker.tsx +++ b/src/picker/Picker.tsx @@ -26,6 +26,7 @@ import theme from '../theme'; import { useProviderProps } from '../provider'; import { Field } from '../field'; import { dimensionValue } from '../utils/styleProps'; +import { AlertCircleOutline, Icon } from '../icon'; function Picker( props: PickerProps, @@ -47,6 +48,7 @@ function Picker( autoFocus, addonBefore, menuWidth, + validationState, } = props; let state = useSelectState(props); @@ -154,6 +156,16 @@ function Picker( minWidth: isQuiet ? '200px' : buttonWidth, }; + let isInvalid = validationState === 'invalid'; + + const validation = ( + } + /> + ); + const overlay = ( ( { 'is-disabled': isDisabled, 'ac-dropdown--quiet': isQuiet, + 'ac-dropdown--invalid': isInvalid, + 'ac-dropdown--valid': validationState === 'valid', }, props.className )} @@ -229,6 +243,9 @@ function Picker( >
{contents}
{isLoadingInitial && 'Loading...'} + {validationState && validationState === 'invalid' && !isLoadingInitial + ? validation + : null} {state.collection.size === 0 ? null : overlay} diff --git a/src/types/select.ts b/src/types/select.ts index d230272d..a3fa528b 100644 --- a/src/types/select.ts +++ b/src/types/select.ts @@ -6,6 +6,7 @@ import { SingleSelection } from './selection'; import { FocusableProps } from './events'; import { StyleProps } from './style'; import { DimensionValue } from './core'; +import { Validation, AriaValidationProps } from '../types'; export interface SelectProps extends CollectionBase, @@ -31,7 +32,8 @@ export interface AriaSelectProps extends SelectProps, DOMProps, AriaLabelingProps, - FocusableDOMProps { + FocusableDOMProps, + AriaValidationProps { /** * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). */ @@ -45,7 +47,8 @@ export interface AriaSelectProps export interface PickerProps extends AriaSelectProps, AddonableProps, - StyleProps { + StyleProps, + Validation { /** * Whether the picker should be displayed with a quiet style. * @default false