packageDocumentation module import "./SelectableContent.scss" ; import * as React from "react" ; import { Select , SelectOption } from "@itwin/itwinui-react" ; public export interface SelectableContentDefinition { id : string ; label : string ; render : ( ) => React . ReactNode ; } public export interface ControlledSelectableContentProps { selectedContentId : string ; onSelectedContentIdChanged ? : ( contentId : string ) => void ; children : SelectableContentDefinition [ ] ; selectAriaLabel ? : string ; } public export function ControlledSelectableContent ( props ) { const { onSelectedContentIdChanged } = props ; const onContentIdSelected = React . useCallback ( ( newValue ) : void => { onSelectedContentIdChanged && onSelectedContentIdChanged ( newValue ) ; } , [ onSelectedContentIdChanged ] ) ; const selectedContent = props . children . find ( ( contentDef ) => contentDef . id === props . selectedContentId ) ?? props . children [ 0 ] ; const options = React . useMemo ( ( ) => { return props . children . map ( ( componentDef ) => ( { label : componentDef . label , value : componentDef . id } ) ) as SelectOption < string > [ ] ; } , [ props . children ] ) ; return ( < div className = "components-selectable-content" > < div className = "components-selectable-content-header" > { options . length > 0 && < Select onChange = { onContentIdSelected } size = "small" className = "components-selectable-content-selector" aria - label = { props . selectAriaLabel } value = { selectedContent . id } options = { options } / > } < /div> < div className = "components-selectable-content-wrapper" > { selectedContent ?. render ( ) } < /div> < /div>); } public export interface SelectableContentProps { defaultSelectedContentId : string ; children : SelectableContentDefinition [ ] ; selectAriaLabel ? : string ; } public export function SelectableContent ( props ) { const [ selectedContentId , setSelectedContentId ] = React . useState ( props . defaultSelectedContentId ) ; const onSelectedContentIdChanged = React . useCallback ( ( id ) => { setSelectedContentId ( id ) ; } , [ ] ) ; return ( < ControlledSelectableContent selectedContentId = { selectedContentId } onSelectedContentIdChanged = { onSelectedContentIdChanged } selectAriaLabel = { props . selectAriaLabel } > { props . children } < /ControlledSelectableContent>); }