superdesk-ui-framework 2.4.14 → 2.4.18

package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx

@@ -228,7 +228,20 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                             <Badge text={item.priority} shape='square' color={item.priorityColor} />
                                         </GridElements.GridItemFooterBlock>
                                         <GridElements.GridItemFooterActions>
-                                            <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
+                                            <Dropdown
+                                                align = 'right'
+                                                append = {true}
+                                                items={[
+                                                    {
+                                                        type: 'group', label: 'Actions', items: [
+                                                            'divider',
+                                                            { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
+                                                            { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
+                                                            { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
+                                                        ]
+                                                    }]}>
+                                                <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
+                                            </Dropdown>
                                         </GridElements.GridItemFooterActions>
                                     </GridElements.GridItemFooter>
                                 </GridElements.GridItem>

package/dist/react/Alerts.tsx

@@ -87,10 +87,10 @@ export default class AlertDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)'/>
-                    <Prop name='style' isRequered={false} type='filled | hollow' default='filled' description='Alerts may be one of styles such as hollow alerts, alerts without background (text-only) or default filled.'/>
-                    <Prop name='size' isRequered={false} type='normal | small' default='normal' description='Specifies a small or normal alert.'/>
-                    <Prop name='restoreIcon' isRequered={false} type='info | help' default='info' description=''/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)'/>
+                    <Prop name='style' isRequired={false} type='filled | hollow' default='filled' description='Alerts may be one of styles such as hollow alerts, alerts without background (text-only) or default filled.'/>
+                    <Prop name='size' isRequired={false} type='normal | small' default='normal' description='Specifies a small or normal alert.'/>
+                    <Prop name='restoreIcon' isRequired={false} type='info | help' default='info' description=''/>
                 </PropsList>
             </section>
         )

package/dist/react/Autocomplete.tsx

@@ -294,29 +294,29 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='items' isRequered={true} type='array' default='/' description='Array of values for autocomplete' />
-                    <Prop name='value' isRequered={false} type='any' default='/' description='Value to be predefined on component load' />
-                    <Prop name='keyValue' isRequered={false} type='string' default='/' description='Key value if array is combined of objects' />
-                    <Prop name='minLength' isRequered={false} type='number' default='1' description='Minimum number of characters to initiate a search' />
-                    <Prop name='listItemTemplate' isRequered={false} type='function' default='/' description='Create custom view of list item' />
-                    <Prop name='label' isRequered={false} type='string' default='/' description='Input label' />
-                    <Prop name='info' isRequered={false} type='string' default='/' description='Hint text' />
-                    <Prop name='error' isRequered={false} type='string' default='/' description='Error text' />
-                    <Prop name='placeholder' isRequered={false} type='string' default='/' description='Placeholder text for the input field.' />
-                    <Prop name='isSearchField' isRequered={false} type='boolean' default='false' 
+                    <Prop name='items' isRequired={true} type='array' default='/' description='Array of values for autocomplete' />
+                    <Prop name='value' isRequired={false} type='any' default='/' description='Value to be predefined on component load' />
+                    <Prop name='keyValue' isRequired={false} type='string' default='/' description='Key value if array is combined of objects' />
+                    <Prop name='minLength' isRequired={false} type='number' default='1' description='Minimum number of characters to initiate a search' />
+                    <Prop name='listItemTemplate' isRequired={false} type='function' default='/' description='Create custom view of list item' />
+                    <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='placeholder' isRequired={false} type='string' default='/' description='Placeholder text for the input field.' />
+                    <Prop name='isSearchField' isRequired={false} type='boolean' default='false' 
                           description='Styles the input as a search field, adds a search icon and the option to clear the field. No visible 
                                        lable is present in this option.' />
-                    <Prop name='inlineLabel' isRequered={false} type='boolean' default='false' description='Position labels as inline' />
-                    <Prop name='required' isRequered={false} type='boolean' default='false' description='Mark field as required' />
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='Mark field as disabled' />
-                    <Prop name='invalid' isRequered={false} type='boolean' default='false' description='Mark field as invalid' />
+                    <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>
 
                 <h3 className='docs-page__h3'>Events</h3>
                 <PropsList>
-                    <Prop name='search' isRequered={false} type='function' default='/' description='Custom function for filtering items' />
-                    <Prop name='onChange' isRequered={true} type='function' default='/' description='Returns value of text input' />
-                    <Prop name='onSelect' isRequered={false} type='function' default='/' description='Returns selected value' />
+                    <Prop name='search' isRequired={false} type='function' default='/' description='Custom function for filtering items' />
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of text input' />
+                    <Prop name='onSelect' isRequired={false} type='function' default='/' description='Returns selected value' />
                 </PropsList>
             </section>
         )

package/dist/react/Badges.tsx

@@ -148,10 +148,10 @@ export default class BadgeDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequered={false} type='string' default='/' description='Badge text value.' />
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
-                    <Prop name='color' isRequered={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500);  NOTE: The badge can have either a Type or Color defined, not both at the same time.' />
-                    <Prop name='shape' isRequered={false} type='round | square' default='round' description='Make shape of badge square or default round.' />
+                    <Prop name='text' isRequired={false} type='string' default='/' description='Badge text value.' />
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
+                    <Prop name='color' isRequired={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500);  NOTE: The badge can have either a Type or Color defined, not both at the same time.' />
+                    <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of badge square or default round.' />
                 </PropsList>
             </section>
         )

package/dist/react/BigIconFont.tsx

@@ -27,9 +27,9 @@ export default class BigIconFontDoc extends React.PureComponent{
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='name' isRequered={false} type='string' default='/' description='Icon name value.' />
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
-                    <Prop name='size' isRequered={false} type='small | big' default='small' description='Specifies a small or big size of Icon.' />
+                    <Prop name='name' isRequired={false} type='string' default='/' description='Icon name value.' />
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
+                    <Prop name='size' isRequired={false} type='small | big' default='small' description='Specifies a small or big size of Icon.' />
                 </PropsList>
             </section>);
     }

package/dist/react/ButtonGroups.tsx

@@ -142,10 +142,10 @@ export default class ButtonGroupsDoc extends React.Component {
                 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='orientation' isRequered={false} type='horizontal | vertical' default='horizontal' description='Specifies orientation for child components of ButtonGroup'/>
-                    <Prop name='spaces' isRequered={false} type='comfort | compact' default='comfort' description='Space between buttons: comfort (default) or compact.'/>
-                    <Prop name='align' isRequered={false} type='left | right | center | inline' default='left' description='Alignment in relation to the parent element. Inline value renders the ButtonGroup without pushing surrounding elements.'/>
-                    <Prop name='padded' isRequered={false} type='boolean' default='false' description='Adds predefined space to the side based on alignment and orientation.'/>
+                    <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Specifies orientation for child components of ButtonGroup'/>
+                    <Prop name='spaces' isRequired={false} type='comfort | compact' default='comfort' description='Space between buttons: comfort (default) or compact.'/>
+                    <Prop name='align' isRequired={false} type='left | right | center | inline' default='left' description='Alignment in relation to the parent element. Inline value renders the ButtonGroup without pushing surrounding elements.'/>
+                    <Prop name='padded' isRequired={false} type='boolean' default='false' description='Adds predefined space to the side based on alignment and orientation.'/>
                 </PropsList>
 
 
@@ -284,8 +284,8 @@ export default class ButtonGroupsDoc extends React.Component {
                 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='size' isRequered={false} type='mini | small | medium | large' default='small' description='Specifies the size of the divider (spacing between buttons).'/>
-                    <Prop name='border' isRequered={false} type='boolean' default='false' description='Adds a dotted border in the middle of the divider.'/>
+                    <Prop name='size' isRequired={false} type='mini | small | medium | large' default='small' description='Specifies the size of the divider (spacing between buttons).'/>
+                    <Prop name='border' isRequired={false} type='boolean' default='false' description='Adds a dotted border in the middle of the divider.'/>
                 </PropsList>
 
                 

package/dist/react/Buttons.tsx

@@ -433,17 +433,17 @@ export default class ButtonsDoc extends React.Component {
                 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequered={true} type='string' default='/' description='Text value of the Button. In the case of iconOnly buttons the value will be set to the aria-label.'/>
-                    <Prop name='iconOnly' isRequered={false} type='boolean' default='false' description='This prop is used for Buttons with icons only. It set to true, it will visually hide the text and use the value for the aria-label.'/>
-                    <Prop name='expand' isRequered={false} type='boolean' default='false' description='Spans the full width of the Button parent.'/>
-                    <Prop name='style' isRequered={false} type='filled | hollow | text-only' default='filled' description='Buttons may be one of styles such as hollow buttons, buttons without background (text-only) or filled (default).'/>
-                    <Prop name='shape' isRequered={false} type='square | round' default='square' description='Make shape of button round or default square.'/>
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
-                    <Prop name='theme' isRequered={false} type='light | dark' default='light' description='Styles button for diffrent background.'/>
-                    <Prop name='size' isRequered={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
-                    <Prop name='icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
-                    <Prop name='onClick' isRequered={true} type='function' default='false' description='Callback fired when a button is pressed.'/>
+                    <Prop name='text' isRequired={true} type='string' default='/' description='Text value of the Button. In the case of iconOnly buttons the value will be set to the aria-label.'/>
+                    <Prop name='iconOnly' isRequired={false} type='boolean' default='false' description='This prop is used for Buttons with icons only. It set to true, it will visually hide the text and use the value for the aria-label.'/>
+                    <Prop name='expand' isRequired={false} type='boolean' default='false' description='Spans the full width of the Button parent.'/>
+                    <Prop name='style' isRequired={false} type='filled | hollow | text-only' default='filled' description='Buttons may be one of styles such as hollow buttons, buttons without background (text-only) or filled (default).'/>
+                    <Prop name='shape' isRequired={false} type='square | round' default='square' description='Make shape of button round or default square.'/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
+                    <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles button for diffrent background.'/>
+                    <Prop name='size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
+                    <Prop name='onClick' isRequired={true} type='function' default='false' description='Callback fired when a button is pressed.'/>
                 </PropsList>
             </section>
         )

package/dist/react/Carousel.tsx

@@ -127,21 +127,21 @@ const images = ${JSON.stringify(images, null, 2)};
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='images' isRequered={true} type='Array<{src: string; alt?: string;}' default='null' description='An array of images to display' />
-                    <Prop name='title' isRequered={false} type='string' default='null' description='Gallery title' />
-                    <Prop name='description' isRequered={false} type='string' default='null' description='Gallery description' />
-                    <Prop name='imageCount' isRequered={false} type='number' default='null' description='If there are more images in gallery than what is visible you can set total count here.' />
-                    <Prop name='headerMeta' isRequered={false} type='JSX.Element' default='null' description='Additional metadata section displayed top right if provided' />
-                    <Prop name='id' isRequered={false} type='string' default='images.length' description='Unique identifier of the element' />
-                    <Prop name='className' isRequered={false} type='string' default='null' description='Style class of the component' />
-                    <Prop name='theme' isRequered={false} type='light | dark' default='light' description='Item style' />
-                    <Prop name='page' isRequered={false} type='number' default='0' description='Index of the first item.' />
-                    <Prop name='circular' isRequered={false} type='boolean' default='false' description='Defines if scrolling would be infinite' />
-                    <Prop name='autoplayInterval' isRequered={false} type='number' default='0' description='Time in milliseconds to scroll items automatically' />
-                    <Prop name='numVisible' isRequered={false} type='number' default='1' description='Number of items per page' />
-                    <Prop name='numScroll' isRequered={false} type='number' default='1' description='Number of items to scroll' />
-                    <Prop name='responsiveOptions' isRequered={false} type='object[]' default='null' description='An array of options for responsive design' />
-                    <Prop name='onPageChange' isRequered={false} type='function' default='null' description='Callback to invoke after scroll' />
+                    <Prop name='images' isRequired={true} type='Array<{src: string; alt?: string;}' default='null' description='An array of images to display' />
+                    <Prop name='title' isRequired={false} type='string' default='null' description='Gallery title' />
+                    <Prop name='description' isRequired={false} type='string' default='null' description='Gallery description' />
+                    <Prop name='imageCount' isRequired={false} type='number' default='null' description='If there are more images in gallery than what is visible you can set total count here.' />
+                    <Prop name='headerMeta' isRequired={false} type='JSX.Element' default='null' description='Additional metadata section displayed top right if provided' />
+                    <Prop name='id' isRequired={false} type='string' default='images.length' description='Unique identifier of the element' />
+                    <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
+                    <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Item style' />
+                    <Prop name='page' isRequired={false} type='number' default='0' description='Index of the first item.' />
+                    <Prop name='circular' isRequired={false} type='boolean' default='false' description='Defines if scrolling would be infinite' />
+                    <Prop name='autoplayInterval' isRequired={false} type='number' default='0' description='Time in milliseconds to scroll items automatically' />
+                    <Prop name='numVisible' isRequired={false} type='number' default='1' description='Number of items per page' />
+                    <Prop name='numScroll' isRequired={false} type='number' default='1' description='Number of items to scroll' />
+                    <Prop name='responsiveOptions' isRequired={false} type='object[]' default='null' description='An array of options for responsive design' />
+                    <Prop name='onPageChange' isRequired={false} type='function' default='null' description='Callback to invoke after scroll' />
                 </PropsList>
             </section>
         )

package/dist/react/Checkboxs.tsx

@@ -415,19 +415,19 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">Checkbox</p>
                 <PropsList>
-                    <Prop name='checked' isRequered={true} type='boolean' default='false' description='The checked state of the input.'/>
-                    <Prop name='label text' isRequered={true} type='string' default='/' description='Label text value.'/>
-                    <Prop name='label side' isRequered={false} type='left | right' default='right' description='Position of label relative to the button.'/>
-                    <Prop name='label hidden' isRequered={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='The disabled state of Checkbox.'/>
+                    <Prop name='checked' isRequired={true} type='boolean' default='false' description='The checked state of the input.'/>
+                    <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
+                    <Prop name='label side' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
+                    <Prop name='label hidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of Checkbox.'/>
                 </PropsList>
                 <p className="docs-page__paragraph">Checkbox Button</p>
                 <PropsList>
-                    <Prop name='checked' isRequered={true} type='boolean' default='/' description='The checked state of the input'/>
-                    <Prop name='label text' isRequered={true} type='string' default='/' description='Label text value.'/>
-                    <Prop name='label icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='label hidden' isRequered={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='The disabled state of CheckboxButton'/>
+                    <Prop name='checked' isRequired={true} type='boolean' default='/' description='The checked state of the input'/>
+                    <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
+                    <Prop name='label icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='label hidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of CheckboxButton'/>
                 </PropsList>
             </section>
         )

package/dist/react/DatePicker.tsx

@@ -98,16 +98,16 @@ export default class DatePickerDoc extends React.Component {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequered={false} type='Date' default='/' description='Item value' />
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='Mark field as disabled' />
-                    <Prop name='dateFormat' isRequered={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY"' />
-                    <Prop name='shortcuts' isRequered={false} type='string' default='/' description='Shortcuts for calendar popup, i.e. [{label: "tomorrow", days: 1}]' />
-                    <Prop name='locale' isRequered={false} type='string' default='/' description='see: https://primefaces.org/primereact/showcase/#/calendar' />
+                    <Prop name='value' isRequired={false} type='Date' default='/' description='Item value' />
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
+                    <Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY"' />
+                    <Prop name='shortcuts' isRequired={false} type='string' default='/' description='Shortcuts for calendar popup, i.e. [{label: "tomorrow", days: 1}]' />
+                    <Prop name='locale' isRequired={false} type='string' default='/' description='see: https://primefaces.org/primereact/showcase/#/calendar' />
                 </PropsList>
 
                 <h3 className='docs-page__h3'>Events</h3>
                 <PropsList>
-                    <Prop name='onChange' isRequered={true} type='function' default='/' description='Returns value of date input' />
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of date input' />
                 </PropsList>
             </section>
         );

package/dist/react/Dropdowns.tsx

@@ -362,33 +362,33 @@ export default class DropdownDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='label' isRequered={false} type='string' default='/' description='Text value of label.'/>
-                    <Prop name='align' isRequered={false} type='left | right' default='left' description='Position of dropdown menu based on button'/>
-                    <Prop name='append' isRequered={false} type='boolean' default='false' description='Append inner dropdown menu to the body'/>
-                    <Prop name='items' isRequered={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of dropdown menu'/>
-                    <Prop name='children' isRequered={true} type='React.ReactNode' default='/' description='If children is "string" type than button have default style with arrow, also children can be custom styled buttons'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Text value of label.'/>
+                    <Prop name='align' isRequired={false} type='left | right' default='left' description='Position of dropdown menu based on button'/>
+                    <Prop name='append' isRequired={false} type='boolean' default='false' description='Append inner dropdown menu to the body'/>
+                    <Prop name='items' isRequired={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of dropdown menu'/>
+                    <Prop name='children' isRequired={true} type='React.ReactNode' default='/' description='If children is "string" type than button have default style with arrow, also children can be custom styled buttons'/>
                 </PropsList>
 
                 <p className='docs-page__paragraph'>Items: Menu item</p>
                 <PropsList>
-                    <Prop name='label' isRequered={true} type='string' default='/' description='Text value of label.'/>
-                    <Prop name='icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='onSelect' isRequered={false} type='function' default='false' description='Callback fired when a item is select.'/>
+                    <Prop name='label' isRequired={true} type='string' default='/' description='Text value of label.'/>
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='onSelect' isRequired={false} type='function' default='false' description='Callback fired when a item is select.'/>
                 </PropsList>
 
                 <p className='docs-page__paragraph'>Items: Menu group</p>
                 <PropsList>
-                    <Prop name='label' isRequered={false} type='string' default='/' description='Text value of label.'/>
-                    <Prop name='type' isRequered={true} type='group' default='group' description='/'/>
-                    <Prop name='items' isRequered={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of group in dropdown menu'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Text value of label.'/>
+                    <Prop name='type' isRequired={true} type='group' default='group' description='/'/>
+                    <Prop name='items' isRequired={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of group in dropdown menu'/>
                 </PropsList>
 
                 <p className='docs-page__paragraph'>Items: Submenu</p>
                 <PropsList>
-                    <Prop name='label' isRequered={true} type='string' default='/' description='Text value of label.'/>
-                    <Prop name='icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='type' isRequered={true} type='submenu' default='submenu' description='/'/>
-                    <Prop name='items' isRequered={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of submenu in dropdown menu'/>
+                    <Prop name='label' isRequired={true} type='string' default='/' description='Text value of label.'/>
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='type' isRequired={true} type='submenu' default='submenu' description='/'/>
+                    <Prop name='items' isRequired={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of submenu in dropdown menu'/>
                 </PropsList>
             </section>
         )

package/dist/react/EmptyStates.tsx

@@ -124,10 +124,10 @@ export default class EmptyStateDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='title' isRequered={true} type='string' default='false' description='Title of the Empty state info block.'/>
-                    <Prop name='description' isRequered={false} type='string' default='false' description='Additional information e.g. suggested actions etc.'/>
-                    <Prop name='size' isRequered={false} type='small | large' default='small' description='Specifies the size and type of the illustration. Small should be used for narrow areas, like side panels, while large is suited for wider content areas. '/>
-                    <Prop name='illustration' isRequered={false} type='string' default='1' description='In combination with the size prop this defines the illustration. Possible values: 1, 2, 3 and dashboard (with size large only).'/>
+                    <Prop name='title' isRequired={true} type='string' default='false' description='Title of the Empty state info block.'/>
+                    <Prop name='description' isRequired={false} type='string' default='false' description='Additional information e.g. suggested actions etc.'/>
+                    <Prop name='size' isRequired={false} type='small | large' default='small' description='Specifies the size and type of the illustration. Small should be used for narrow areas, like side panels, while large is suited for wider content areas. '/>
+                    <Prop name='illustration' isRequired={false} type='string' default='1' description='In combination with the size prop this defines the illustration. Possible values: 1, 2, 3 and dashboard (with size large only).'/>
                 </PropsList>
 
             </section>

package/dist/react/GridItem.tsx

@@ -378,26 +378,26 @@ export default class GridItemDoc extends React.Component<{}, IState> {
                 
                 <h3 className="docs-page__h3">GridItem Props</h3>
                 <PropsList>
-                    <Prop name='status' isRequered={false} type='actioning | selected | activated | string' default='/' description='Specifies the status of the item. Multiple values are possible.'/>
-                    <Prop name='itemtype' isRequered={false} type='audio | composite | file | graphic | photo | slideshow | text | video | string' default='file' description='Specifies the file type of the item.'/>
-                    <Prop name='fetched' isRequered={false} type='boolean' default='false' description='If set to true it will add a visual marker in the content area indicating that the item was fetched.'/>
-                    <Prop name='locked' isRequered={false} type='boolean' default='false' description='Visual indication if the item is locked (red border at the bottom).'/>
-                    <Prop name='onClick' isRequered={false} type='function' default='false' description='Callback fired when when the item is pressed. Should be added only if there is a click action on the whole item. Adds pointer cursor and hover action to the item if present.'/>
+                    <Prop name='status' isRequired={false} type='actioning | selected | activated | string' default='/' description='Specifies the status of the item. Multiple values are possible.'/>
+                    <Prop name='itemtype' isRequired={false} type='audio | composite | file | graphic | photo | slideshow | text | video | string' default='file' description='Specifies the file type of the item.'/>
+                    <Prop name='fetched' isRequired={false} type='boolean' default='false' description='If set to true it will add a visual marker in the content area indicating that the item was fetched.'/>
+                    <Prop name='locked' isRequired={false} type='boolean' default='false' description='Visual indication if the item is locked (red border at the bottom).'/>
+                    <Prop name='onClick' isRequired={false} type='function' default='false' description='Callback fired when when the item is pressed. Should be added only if there is a click action on the whole item. Adds pointer cursor and hover action to the item if present.'/>
                 </PropsList>
 
                 <h3 className="docs-page__h3">GridItemFooterBlock Props</h3>
                 <PropsList>
-                    <Prop name='align' isRequered={false} type='left | right' default='left' description='Sets the alignment of items inside the footer. Must be placed inside the GridItemFooter component.'/>
+                    <Prop name='align' isRequired={false} type='left | right' default='left' description='Sets the alignment of items inside the footer. Must be placed inside the GridItemFooter component.'/>
                 </PropsList>
 
                 <h3 className="docs-page__h3">GridItemFooterActions Props</h3>
                 <PropsList>
-                    <Prop name='autohide' isRequered={false} type='boolean' default='true' description='Action buttons in the footer are by default hidden and revealed only when the cursor hovers the item. Set to false to make the action buttons always visible.'/>
+                    <Prop name='autohide' isRequired={false} type='boolean' default='true' description='Action buttons in the footer are by default hidden and revealed only when the cursor hovers the item. Set to false to make the action buttons always visible.'/>
                 </PropsList>
 
                 <h3 className="docs-page__h3">GridItemTime Props</h3>
                 <PropsList>
-                    <Prop name='time' isRequered={true} type='sring' default='/' description='Sets the value of the time component.'/>
+                    <Prop name='time' isRequired={true} type='sring' default='/' description='Sets the value of the time component.'/>
                 </PropsList>
 
                 

package/dist/react/GridList.tsx

@@ -95,9 +95,9 @@ export default class GridListDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='size' isRequered={false} type='x-small | small | medium | large' default='small' description='Specifies the size of the items in the grid. '/>
-                    <Prop name='gap' isRequered={false} type='small | medium | large | x-large' default='small' description='Defines the gap between the items inside the Grid list. '/>
-                    <Prop name='margin' isRequered={false} type='0 | 1 | 2 | 3' default='3' description='Defines the margin around the Grid list. The values are based on multipliers of the the $sd-base-increment (equal to 8px). Setting the value to 3 results in a margin of 24px.'/>
+                    <Prop name='size' isRequired={false} type='x-small | small | medium | large' default='small' description='Specifies the size of the items in the grid. '/>
+                    <Prop name='gap' isRequired={false} type='small | medium | large | x-large' default='small' description='Defines the gap between the items inside the Grid list. '/>
+                    <Prop name='margin' isRequired={false} type='0 | 1 | 2 | 3' default='3' description='Defines the margin around the Grid list. The values are based on multipliers of the the $sd-base-increment (equal to 8px). Setting the value to 3 results in a margin of 24px.'/>
                 </PropsList>
 
             </section>

package/dist/react/IconButtons.tsx

@@ -81,9 +81,9 @@ export default class IconButtonDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='ariaValue' isRequered={true} type='string' default='/' description='Description for screen readers'/>
-                    <Prop name='size' isRequered={false} type='small' default='normal' description='Creates an IconButton with a smaller footprint.'/>
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers'/>
+                    <Prop name='size' isRequired={false} type='small' default='normal' description='Creates an IconButton with a smaller footprint.'/>
                 </PropsList>
             </section>
         )

package/dist/react/IconFont.tsx

@@ -3,19 +3,20 @@ import * as Markup from "../../js/react";
 
 import { Icon, Prop, PropsList } from '../../../app-typescript';
 
+//@ts-ignore
 import * as iconFont from '../../../app/styles/_icon-font.scss';
 
-export default class IconFontDoc extends React.PureComponent{
-    render(){
+export default class IconFontDoc extends React.PureComponent {
+    render() {
         const array = iconFont.icon.split(', ');
         const icons = array.map((icon, index) =>
             <li key={index}>
-                <Icon name={icon}/>
+                <Icon name={icon} />
                 <span>{icon}</span>
             </li>
-            );
-        return(
-            <section className="docs-page__container"> 
+        );
+        return (
+            <section className="docs-page__container">
                 <h2 className="docs-page__h2 docs-page__text-align--center">Icon font</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <Icon name="photo" />
@@ -27,9 +28,9 @@ export default class IconFontDoc extends React.PureComponent{
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='name' isRequered={false} type='string' default='/' description='Icon name value.' />
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
-                    <Prop name='size' isRequered={false} type='small | big' default='small' description='Specifies a small or big size of Icon.' />
+                    <Prop name='name' isRequired={false} type='string' default='/' description='Icon name value.' />
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
+                    <Prop name='size' isRequired={false} type='small | big' default='small' description='Specifies a small or big size of Icon.' />
                 </PropsList>
             </section>);
     }

package/dist/react/IconLabels.tsx

@@ -59,10 +59,10 @@ export default class IconLabelDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequered={true} type='string' default='/' description='IconLabel text value.'/>
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
-                    <Prop name='icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='style' isRequered={false} type='basic | translucent' default='basic' description='Defines the style of the label (basic or translucent).'/>
+                    <Prop name='text' isRequired={true} type='string' default='/' description='IconLabel text value.'/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='style' isRequired={false} type='basic | translucent' default='basic' description='Defines the style of the label (basic or translucent).'/>
                 </PropsList>
             </section>
         )

package/dist/react/IconPicker.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { IconPicker, PropsList, Prop } from "../../../app-typescript";
+
+const IconPickerDocs = () => {
+
+    const [value, setValue] = React.useState('amp');
+
+    return (
+        <section className="docs-page__container">
+            <h2 className="docs-page__h2">Icon Picker</h2>
+            <Markup.ReactMarkupCodePreview>{`
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}     
+                    />
+                `}
+            </Markup.ReactMarkupCodePreview>
+            <Markup.ReactMarkup>
+                <Markup.ReactMarkupPreview>
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}
+                    />
+                </Markup.ReactMarkupPreview>
+                <Markup.ReactMarkupCode>{`
+                    
+                    const [value, setValue] = React.useState("amp");
+                    ...
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}
+                    />
+                `}</Markup.ReactMarkupCode>
+            </Markup.ReactMarkup>
+
+            <h3 className="docs-page__h3">Props</h3>
+            <PropsList>
+                <Prop name='label' isRequired={false} type='string' default='Icon' description='Select label' />
+                <Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
+                <Prop name='translateFunction' isRequired={false} type='function' default='(text) => text' description='eg: gettext' />
+                <Prop name='value' isRequired={true} type='string' default='null' description='Current value' />
+                <Prop name='onChange' isRequired={true} type='Function' default='null' description='Callback onChange event ' />
+            </PropsList>
+
+        </section>
+    )
+}
+
+export default IconPickerDocs;