packageDocumentation module import classnames from "classnames" ; import * as React from "react" ; import { CommonProps } from "../utils/Props" ; import { useRefs } from "../utils/hooks/useRefs" ; public deprecated export interface SelectOption { /** Label of the option. If `value` is not set when using SelectOption[], also serves as the value. */ label : string ; /** Value of the option when using SelectOption[].  */ value ? : string | number | readonly string [ ] ; /** Indicates whether the option is disabled. */ disabled ? : boolean ; } public deprecated export interface SelectProps extends React . SelectHTMLAttributes < HTMLSelectElement > , CommonProps { example options : ( string | SelectOption ) [ ] | { [ key ] : ( string | SelectOption ) ; } ; /** Indicates whether to set focus to the select element */ setFocus ? : boolean ; /** Provides ability to return reference to HTMLSelectElement */ ref ? : React . Ref < HTMLSelectElement > ; } function getCurrentDefaultValue ( defaultValue , placeholderValue ) { if ( defaultValue ) return defaultValue ; return placeholderValue ; } function getOptionLabel ( option ) { return ( typeof option === "string" ) ? option : option . label ; } function getOptionValue ( option ) { return ( typeof option === "string" ) ? option : ( undefined !== option . value ? option . value : option . label ) ; } function getOptionDisabled ( option ) { return ( typeof option === "string" ) ? undefined : option . disabled ; } const ForwardRefSelect = React . forwardRef < HTMLSelectElement , SelectProps > ( function ForwardRefSelect ( props , ref ) { const selectElement = React . useRef < HTMLSelectElement > ( null ) ; const placeholderValue = React . useRef ( "placeholder" ) ; const isInitialMount = React . useRef ( true ) ; const refs = useRefs ( selectElement , ref ) ; React . useEffect ( ( ) => { if ( props . setFocus && selectElement . current ) selectElement . current . focus ( ) ; } , [ props ] ) ; React . useEffect ( ( ) => { isInitialMount . current = false ; } , [ ] ) ; const { value : selectValue , required , options , setFocus , className , defaultValue , ... otherProps } = props ; const showPlaceholder = React . useMemo ( ( ) => props . placeholder && ( undefined === selectValue || selectValue === placeholderValue . current ) && ! defaultValue , [ defaultValue , selectValue , props . placeholder ] ) ; const isRequired = React . useMemo ( ( ) => showPlaceholder || required , [ required , showPlaceholder ] ) ; const currentDefaultValue = React . useMemo ( ( ) => getCurrentDefaultValue ( defaultValue , showPlaceholder ? placeholderValue . current : undefined ) , [ defaultValue , showPlaceholder ] ) ; const value = ( ! isInitialMount . current && undefined === selectValue ) ? currentDefaultValue : selectValue ; return ( < select ref = { refs } { ... otherProps } required = { isRequired } className = { classnames ( "uicore-inputs-select" , className ) } value = { value } defaultValue = { value === undefined ? currentDefaultValue : undefined } > { showPlaceholder && < option className = "placeholder" disabled key = "" value = { placeholderValue . current } > { props . placeholder } < /option>} { options instanceof Array ? options . map ( ( option , index ) => ( < option key = { index } value = { getOptionValue ( option ) } disabled = { getOptionDisabled ( option ) } > { getOptionLabel ( option ) } < /option>)) : Object . keys ( options ) . map ( ( key ) => ( < option key = { key } value = { key } disabled = { getOptionDisabled ( options [ key ] ) } > { getOptionLabel ( options [ key ] ) } < /option>))} < /select>); } ) ; public deprecated export const Select = ForwardRefSelect ;