packageDocumentation module import "./themed-select.scss" ; import classnames from "classnames" ; import * as React from "react" ; import Component , { components } from "react-select" ; import { formatGroupLabel , getOptionLabel , getOptionValue } from "react-select/src/builtins" ; import { SelectComponentsConfig } from "react-select/src/components/index" ; import { MenuProps } from "react-select/src/components/Menu" ; import { ActionMeta , FocusEventHandler , InputActionMeta , KeyboardEventHandler , ValueType } from "react-select/src/types" ; import { UiCore } from "../UiCore" ; import { getCssVariableAsNumber } from "../utils/getCssVariable" ; import { getParentSelector } from "./modalHelper" ; type FormatOptionLabelContext = "menu" | "value" ; type FormatOptionLabelMeta = { context : FormatOptionLabelContext ; inputValue : string ; selectValue : ValueType < OptionType > ; } ; beta deprecated itwin export interface OptionType { value : any ; label : string ; } beta deprecated itwin export type OptionsType = Array < OptionType > ; beta deprecated itwin export type ThemedSelectProps = { "aria-label" ? : string ; "aria-labelledby" ? : string ; autoFocus ? : boolean ; backspaceRemovesValue ? : boolean ; blurInputOnSelect ? : boolean ; captureMenuScroll ? : boolean ; className ? : string ; closeMenuOnSelect ? : boolean ; closeMenuOnScroll ? : boolean | EventListener ; components ? : SelectComponentsConfig < OptionType > ; controlShouldRenderValue ? : boolean ; defaultMenuIsOpen ? : boolean ; defaultValue ? : ValueType < OptionType > ; /** Provides ability to return reference to the outer HTMLDivElement */ divRef ? : React . Ref < HTMLDivElement > ; escapeClearsValue ? : boolean ; filterOption ? : ( ( option : OptionType , rawInput : string ) => boolean ) | null ; formatGroupLabel ? : typeof formatGroupLabel ; formatOptionLabel ? : ( optionType : OptionType , formatLabelMeta : FormatOptionLabelMeta ) => React . ReactNode ; getOptionLabel ? : typeof getOptionLabel ; getOptionValue ? : typeof getOptionValue ; hideSelectedOptions ? : boolean ; id ? : string ; inputValue ? : string ; inputId ? : string ; instanceId ? : number | string ; isClearable ? : boolean ; isDisabled ? : boolean ; isLoading ? : boolean ; isOptionDisabled ? : ( option : OptionType , options : OptionsType ) => boolean | false ; isMulti ? : boolean ; isMenuFixed ? : boolean ; isRtl ? : boolean ; isSearchable ? : boolean ; minMenuHeight ? : number ; maxMenuHeight ? : number ; menuIsOpen ? : boolean ; menuShouldBlockScroll ? : boolean ; menuShouldScrollIntoView ? : boolean ; name ? : string ; noOptionsMessage ? : ( obj : { inputValue : string ; } ) => string | null ; onBlur ? : FocusEventHandler ; onChange ? : ( value : ValueType < OptionType > , action : ActionMeta < OptionType > ) => void ; onFocus ? : FocusEventHandler ; onInputChange ? : ( newValue : string , actionMeta ? : InputActionMeta ) => void ; onKeyDown ? : KeyboardEventHandler ; onMenuOpen ? : ( ) => void ; onMenuClose ? : ( ) => void ; onMenuScrollToTop ? : ( e : React . SyntheticEvent < HTMLElement > ) => void ; onMenuScrollToBottom ? : ( e : React . SyntheticEvent < HTMLElement > ) => void ; openMenuOnFocus ? : boolean ; openMenuOnClick ? : boolean ; options : OptionsType ; pageSize ? : number ; placeholder ? : string ; /** Provides ability to return reference to the ThemedSelect */ ref ? : React . Ref < Component > ; styles ? : React . CSSProperties ; tabIndex ? : string ; tabSelectsValue ? : boolean ; value ? : ValueType < OptionType > ; } ; const ThemedMenu = ( props ) => { return ( < div className = "uicore-reactSelectTop" > < components . Menu { ... props } / > < /div>); } ; beta deprecated itwin export function ThemedSelect ( props ) { const noOptionLabel = React . useRef < string | undefined > ( ) ; const defaultOptionMessage = React . useCallback ( ( ) => { if ( ! noOptionLabel . current ) { noOptionLabel . current = UiCore . translate ( "reactelect.noSelectOption" ) ; } return noOptionLabel . current ; } , [ noOptionLabel ] ) ; const noOptionFunction = props . noOptionsMessage ?? defaultOptionMessage ; const selectClassName = classnames ( "uicore-reactSelectTop" , props . className ) ; const portalTarget = ! ! props . isMenuFixed ? undefined : getParentSelector ( ) ; const { classNamePrefix , className , noOptionsMessage , menuPortalTarget , isMenuFixed , styles , components , divRef , ref , ... otherProps } = props as any ; const selectStyles = { ... props . styles , menuPortal : ( base ) => ( { ... base , zIndex } ) } ; const zIndex = getCssVariableAsNumber ( "--uicore-z-index-dialog-popup" ) ; return ( < div className = { selectClassName } ref = { divRef } > < Component ref = { ref } classNamePrefix = "react-select" noOptionsMessage = { noOptionFunction } menuPortalTarget = { portalTarget } styles = { selectStyles } components = { { Menu : ThemedMenu , ... props . components } } { ... otherProps } /> < /div>); }