superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/dist/react/Text.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop, Text } from '../../../app-typescript';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export default class TextDoc extends React.Component<IProps> {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Text</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <Text>Cum sociis natoque penatibus et magnis dis parturient...</Text>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">Text component.</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Sizes and alignments</p>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text size='x-small' style='italic'>
+                                Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus ac cursus commodo,
+                                tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis
+                                ornare vel eu leo. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text align='end'>
+                                Default size (small), align to end. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+                                Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                                Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
+                                posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent
+                                commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Morbi leo
+                                risus, porta ac consectetur ac, vestibulum at eros.
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text size='medium' align='center'>
+                                Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere
+                                consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus,
+                                porta ac consectetur ac, vestibulum at eros.
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text size='large' align='justify'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+
+                        <p className="docs-page__paragraph">// Variations</p>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text weight='light' size='medium'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text fontStyle='serif' weight='strong' size='medium' color='light' align='center'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text fontStyle='serif' weight='light' size='small' align='start'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+                        
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // Sizes and alignments
+
+                        <Text size='x-small' style='italic'>
+                            Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus...
+                        </Text>
+
+                        <Text align='end'>
+                            Default size (small), align to end. Praesent commodo cursus magna...
+                        </Text>
+
+                        <Text size='medium' align='center'>
+                            Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque...
+                        </Text>
+
+                        <Text size='large' align='justify'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl...
+                        </Text>
+
+                        // Variations
+
+                        <Text weight='light' size='medium'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
+                        </Text>
+
+                        <Text fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et... 
+                        </Text>
+
+                        <Text className='' fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et... 
+                        </Text>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='weight' isRequired={false} type='light | normal | medium | strong' default='normal' description='Change the default font weight.'/>
+                    <Prop name='size' isRequired={true} type='x-small | small | medium | large' default='small' description='Choose between four predefined font sizes.'/>
+                    <Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
+                    <Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
+                    <Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between the default – sans (Roboto) – and serif (Merriweather) font styles. '/>
+                    <Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
+                    <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/dist/react/TimePicker.tsx

@@ -15,10 +15,16 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
     render() {
         return (
             <TimePicker
-                value={this.state.time}
-                onChange={(time) => {
-                    this.setState({time});
-                }}
+            value={this.state.time}
+            onChange={(time) => {
+                this.setState({time});
+            }}
+            required
+            tabindex={1}
+            label={'This is Label'}
+            info={'This is info'}
+            error={'This is error'}
+            allowSeconds
             />
         );
     }
@@ -38,10 +44,13 @@ export default class TimePickerDoc extends React.Component {
                         render() {
                             return (
                                 <TimePicker
-                                    value={this.state.time}
-                                    onChange={(time) => {
-                                        this.setState({time});
-                                    }}
+                                value={this.state.time}
+                                onChange={(time) => {
+                                    this.setState({time});
+                                }}
+                                label={'This is Label'}
+                                info={'This is info'}
+                                error={'This is error'}
                                 />
                             );
                         }
@@ -67,14 +76,15 @@ export default class TimePickerDoc extends React.Component {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={true} type='string' default='/' description='Item value' />
-                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
+                    <Prop name='value' isRequired={true} type='string' default='/' description='Item value.' />
+                    <Prop name='allowSeconds' isRequired={true} type='string' default='/' description='Allow seconds.' />
+                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
                 </PropsList>
 
                 <h3 className='docs-page__h3'>Events</h3>
                 <PropsList>
-                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input' />
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input.' />
                 </PropsList>
             </section>
         );

package/dist/react/Togglebox.tsx

@@ -40,6 +40,7 @@ const ToggleboxDocs = () => {
                 <Prop name='hideUsingCSS' isRequired={false} type='boolean' default='false' description='Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' />
                 <Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render' />
                 <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
+                <Prop name='margin' isRequired={false} type='none | small | normal | large' default='normal' description='Defines the bottom margin of the toggle box.' />
                 <Prop name='onOpen' isRequired={false} type='function' default='null' description='Callback on open event' />
                 <Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on close event' />
             </PropsList>
@@ -47,5 +48,4 @@ const ToggleboxDocs = () => {
     )
 }
 
-
 export default ToggleboxDocs;

package/dist/react/Tooltips.tsx

@@ -60,7 +60,7 @@ export default class TooltipDoc extends React.Component {
                        
                         <div className="docs-page__content-row docs-page__content-row--no-margin">
                             
-                            <div className="docs-page__content-row docs-page__content-row--no-margin" style={{background: "#ebebeb", width: "100%", padding: "5px", overflow: "hidden"}}>
+                            <div className="docs-page__content-row docs-page__content-row--no-margin">
                                 <Tooltip text="I'm appended to body" flow='top' appendToBody={true}>
                                     <Button text='top' onClick={() => false} />
                                 </Tooltip>

package/dist/react/TreeSelect.tsx

@@ -0,0 +1,422 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop } from '../../../app-typescript';
+import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
+import { ITreeNode, TreeSelect } from '../../../app-typescript/components/TreeSelect';
+
+interface IState {
+    value: any;
+    value2: any;
+    options: any;
+    options2: any;
+    inputValue: string;
+    arr: any;
+}
+
+let options = [
+    {
+        value: {name: 'Category1'},
+        children: [
+            {
+                value: {name: 'Sub-category1'},
+                children: [
+                    {value: {name: 'Item20'}}
+                ]
+            },
+            {
+                value: {name: 'Sub-category2'},
+                children: [
+                    {value: {name: 'Item21'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category3'},
+                children: [
+                    {value: {name: 'Item22'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category4'},
+                children: [
+                    {value: {name: 'Item23'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category5'},
+                children: [
+                    {value: {name: 'Item24'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category6'},
+                children: [
+                    {value: {name: 'Item25'}}
+                ]
+            }
+        ]
+    },
+    {
+        value: {name: 'Category2'},
+        children: [
+            {
+                value: {name: 'Item8'}
+            },
+            {
+                value: {name: 'Item9'}
+            }
+        ]
+    },
+    {
+        value: {name: 'Category3', bgColor: 'red'},
+        children: [
+            {
+                value: {name: 'Item10'}
+            },
+            {
+                value: {name: 'Item11'}
+            }
+        ]
+    },
+]
+
+let options2 = [
+    {
+        value: {name: 'Category1', border: 'red'},
+        children: [
+            {
+                value: {name: 'Sub-category1'},
+                children: [
+                    {value: {name: 'Item20'}}
+                ]
+            },
+            {
+                value: {name: 'Sub-category2'},
+                children: [
+                    {value: {name: 'Item21'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category3'},
+                children: [
+                    {value: {name: 'Item22'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category4'},
+                children: [
+                    {value: {name: 'Item23'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category5'},
+                children: [
+                    {value: {name: 'Item24'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category6'},
+                children: [
+                    {value: {name: 'Item25'}}
+                ]
+            }
+        ]
+    },
+    {
+        value: {name: 'Category2', border: 'green'},
+        children: [
+            {
+                value: {name: 'Item8'}
+            },
+            {
+                value: {name: 'Item9'}
+            }
+        ]
+    },
+    {
+        value: {name: 'Category3', border: 'yellow'},
+        children: [
+            {
+                value: {name: 'Item10'}
+            },
+            {
+                value: {name: 'Item11'}
+            }
+        ]
+    },
+]
+
+let fetchedArr = [];
+fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data
+);
+
+type ICancelFn = () => void;
+
+function searchOptions(
+    term: string,
+    callback: (res: any) => void,
+): ICancelFn {
+    let timeout = setTimeout(() => {
+        
+        callback(
+            fetchedArr
+                .filter((item: any) => item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
+                .map((item) => ({value: item})),
+        );
+    }, 1000);
+
+    return () => {
+        clearTimeout(timeout);
+    }
+}
+
+export class TreeSelectDocs extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: [],
+            value2: [],
+            options: options,
+            options2: options,
+            inputValue: '',
+            arr: []
+        }
+        
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(e, option) {
+        if(option.item) {
+            e.stopPropagation();
+            e.preventDefault();
+            
+            this.setState({
+                options: option.item
+            })
+        }
+    }
+
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>TreeSelect</h2>
+
+                <Markup.ReactMarkupCodePreview>{`
+                    <TreeSelect
+                        options={this.state.options2}
+                        getLabel={'label'}
+                        getMultilevelArray={'items'}
+                        selectBranchWithChildren={true}
+                        onChange={() => false}
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    value={[{name: 'Item1'}, {name: 'Item2'}]}
+                                    getOptions={() => options}
+                                    kind={'synchronous'}
+                                    getId={(item) => item.name}
+                                    getLabel={(item) => item.name}
+                                    getBackgroundColor={(item: any) => item.bgColor}
+                                    selectBranchWithChildren={true}
+                                    allowMultiple
+                                    fullWidth
+                                    singleLevelSearch
+                                    required
+                                    info={'Info Message'}
+                                    error={'Error Message'}
+                                    label={'TreeSelect Label'}
+                                    searchPlaceholder='Search...'
+                                    onChange={(e) => false}
+                                    valueTemplate={(item, Wrapper) => {
+                                        return (
+                                            <Wrapper backgroundColor={item.bgColor}>
+                                                <span>{item.name}</span>
+                                            </Wrapper>
+                                        );
+                                    }}    
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            value={[{name: 'Item1'}, {name: 'Item2'}]}
+                            getOptions={() => options}
+                            kind={'synchronous'}
+                            getId={(item) => item.name}
+                            getLabel={(item) => item.name}
+                            getBackgroundColor={(item: any) => item.bgColor}
+                            selectBranchWithChildren={true}
+                            allowMultiple
+                            fullWidth
+                            singleLevelSearch
+                            required
+                            info={'Info Message'}
+                            error={'Error Message'}
+                            label={'TreeSelect Label'}
+                            searchPlaceholder='Search...'
+                            onChange={(e) => false}
+                            valueTemplate={(item, Wrapper) => {
+                                return (
+                                    <Wrapper backgroundColor={item.bgColor}>
+                                        <span>{item.name}</span>
+                                    </Wrapper>
+                                );
+                            }}    
+                        />
+                    `}</Markup.ReactMarkupCode>
+                    
+                </Markup.ReactMarkup>
+
+                <p className='docs-page__paragraph'>Asynchronous mode in TreeSelect component.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                            <TreeSelect
+                                kind="asynchronous"
+                                searchOptions={searchOptions}
+                                value={this.state.value}
+                                onChange={(val) => {
+                                    this.setState({value: val});
+                                }}
+                                getLabel={({display_name}) => display_name
+                                }
+                                getId={({qcode}) => qcode.display_name}
+                                selectBranchWithChildren={false}
+                                allowMultiple={true}
+                            />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            kind="asynchronous"
+                            searchOptions={searchOptions}
+                            value={this.state.value}
+                            onChange={(val) => {
+                                this.setState({value: val});
+                            }}
+                            getLabel={({name}) => name}
+                            getId={({qcode}) => qcode}
+                            selectBranchWithChildren={false}
+                            optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
+                            allowMultiple={true}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                    
+                </Markup.ReactMarkup>
+
+                <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    getOptions={() => options2}
+                                    kind={'synchronous'}
+                                    getId={(item) => item.name}
+                                    getLabel={(item) => item.name}
+                                    getBackgroundColor={(item) => item.bgColor}
+                                    getBorderColor={(item) => item.border}
+                                    placeholder='Select one'
+                                    selectBranchWithChildren={true}
+                                    onChange={(e) => false}
+                                    optionTemplate={(item: any) => {
+                                        return <div>Label: {item.name}</div>
+                                    }}
+                                    valueTemplate={(item: any, Wrapper) => {
+                                        return <Wrapper borderColor={item.border}>
+                                            <span>{item.name}</span>
+                                        </Wrapper>
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            getOptions={() => options2}
+                            kind={'synchronous'}
+                            getId={(item) => item.name}
+                            getLabel={(item) => item.name}
+                            getBackgroundColor={(item) => item.bgColor}
+                            getBorderColor={(item) => item.border}
+                            placeholder='Select one'
+                            selectBranchWithChildren={true}
+                            onChange={(e) => false}
+                            optionTemplate={(item: any) => {
+                                return <div>Label: {item.name}</div>
+                            }}
+                            valueTemplate={(item: any, Wrapper) => {
+                                return <Wrapper borderColor={item.border}>
+                                    <span>{item.name}</span>
+                                </Wrapper>
+                            }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
+                    <Prop name='getOptions' isRequired={true} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
+                    <Prop name='kind' isRequired={true} type='synchronous | asynchronous' default='/' description='Type of TreeSelect component.'/>
+                    <Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
+                    <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
+                    <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
+                    <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
+                    <Prop name='allowMultiple' isRequired={false} type='boolean' default='/' description='Enable multi-select mode.'/>
+                    <Prop name='singleLevelSearch' isRequired={false} type='boolean' default='/' description='Limit search to only the level that is displayed.'/>
+                    <Prop name='placeholder' isRequired={false} type='string' default='/' description='Placeholder of component in single select mode.'/>
+                    <Prop name='searchPlaceholder' isRequired={false} type='string' default='/' description='Filter input placeholder.'/>
+                    <Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
+                    <Prop name='getId' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
+                    <Prop name='getBackgroundColor' isRequired={true} type='Function' default='/' description='Function to return background color of individual item in options.'/>
+                    <Prop name='getBorderColor' isRequired={true} type='Function' default='/' description='Function to return border color of individual item in options in single-select mode.'/>
+                    <Prop name='valueTemplate' isRequired={false} type='Function(item, Wrapper)' default='/' description='Function that gets an item in the value and returns the content for it.'/>
+                    <Prop name='optionTemplate' isRequired={false} type='Function(item)' default='/' description='Function that gets the option and returns the content for it.'/>
+                    <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
+                    <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
+                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
+                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
+                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
+                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
+                    <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
+                </PropsList>
+
+                <p className='docs-page__paragraph'>synchronous:</p>
+                <PropsList>
+                    <Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
+                </PropsList>
+
+                <p className='docs-page__paragraph'>asynchronous:</p>
+                <PropsList>
+                    <Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
+                    <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='function will be called when a search is initiated from UI.'/>
+                </PropsList>
+  
+            </section>
+        )
+    }
+}