superdesk-ui-framework 2.4.14 → 2.4.15

package/dist/react/Index.tsx

@@ -40,10 +40,15 @@ import GridListDoc from './GridList';
 import GridItemDoc from './GridItem';
 import ModalDoc from './Modal';
 import CarouselDoc from './Carousel';
+import ToggleboxDocs from './Togglebox';
+import ListItemsDoc from './ListItems';
+import SelectGridDocs from './SelectGrid';
+import IconPickerDocs from "./IconPicker";
 
 import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
-import {SelectWithTemplateDocs} from './SelectWithTemplate';
-import {PopoverDoc} from './Popover';
+import { SelectWithTemplateDocs } from './SelectWithTemplate';
+import { PopoverDoc } from './Popover';
+import { MenuDocs } from './Menu';
 
 const pages = {
     basicComponents: {
@@ -96,6 +101,9 @@ const pages = {
             },
             'carousel': {
                 name: 'Carousel'
+            },
+            'menu': {
+                name: 'Menu',
             }
         }
     },
@@ -130,6 +138,12 @@ const pages = {
             'grid-list': {
                 name: 'Grid List'
             },
+            "togglebox": {
+                name: "Togglebox"
+            },
+            'list-items': {
+                name: 'List items'
+            },
         }
     },
     formComponents: {
@@ -147,6 +161,9 @@ const pages = {
             'select': {
                 name: 'Select',
             },
+            'select-grid': {
+                name: 'Select Grid',
+            },
             'select-with-template': {
                 name: 'Select with template',
             },
@@ -156,6 +173,9 @@ const pages = {
             'time-picker': {
                 name: 'Time Picker',
             },
+            'icon-picker': {
+                name: 'Icon Picker',
+            },
             'switch': {
                 name: 'Switch'
             },
@@ -221,6 +241,11 @@ class ReactDoc extends React.Component {
                         <Route path="/react/grid-item" component={GridItemDoc} />
                         <Route path="/react/modal" component={ModalDoc} />
                         <Route path="/react/carousel" component={CarouselDoc} />
+                        <Route path="/react/menu" component={MenuDocs} />
+                        <Route path="/react/togglebox" component={ToggleboxDocs} />
+                        <Route path="/react/list-items" component={ListItemsDoc} />
+                        <Route path="/react/select-grid" component={SelectGridDocs} />
+                        <Route path="/react/icon-picker" component={IconPickerDocs} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>

package/dist/react/Inputs.tsx

@@ -74,15 +74,15 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequered={false} type='string' default='/' description='Item value'/>
-                    <Prop name='label' isRequered={false} type='string' default='/' description='Input label'/>
-                    <Prop name='maxLength' isRequered={false} type='number' default='/' description='Sets max length for input text'/>
-                    <Prop name='info' isRequered={false} type='string' default='/' description='Hint text'/>
-                    <Prop name='error' isRequered={false} type='string' default='/' description='Error text'/>
-                    <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='value' isRequired={false} type='string' default='/' description='Item value'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
+                    <Prop name='maxLength' isRequired={false} type='number' default='/' description='Sets max length for input text'/>
+                    <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>
             </section>
         )

package/dist/react/Labels.tsx

@@ -217,12 +217,12 @@ export default class LabelsDoc extends React.Component {
                 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequered={true} type='string' default='/' description='Label 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 label can have either a Type or Color defined, not both at the same time.'/>
-                    <Prop name='size' isRequered={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large label.'/>
-                    <Prop name='noTransform' isRequered={false} type='boolean' default='false' description='Transforms text to uppercase.'/>
-                    <Prop name='style' isRequered={false} type='filled | hollow | translucent' default='filled' description='Label may have one of these styles - filled (default), hollow or translucent.'/>
+                    <Prop name='text' isRequired={true} type='string' default='/' description='Label 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 label can have either a Type or Color defined, not both at the same time.'/>
+                    <Prop name='size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large label.'/>
+                    <Prop name='noTransform' isRequired={false} type='boolean' default='false' description='Transforms text to uppercase.'/>
+                    <Prop name='style' isRequired={false} type='filled | hollow | translucent' default='filled' description='Label may have one of these styles - filled (default), hollow or translucent.'/>
                 </PropsList>
             </section>
         )

package/dist/react/LeftNavigations.tsx

@@ -40,12 +40,12 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='groups' isRequered={true} type='Array<menugroup>' default='/' description='Array of groups'/>
-                    <Prop name='activeItemId' isRequered={true} type='string' default='/' description='Id of active item'/>
-                    <Prop name='menugroup label' isRequered={true} type='string' default='/' description='Menugroup label text value.'/>
-                    <Prop name='menugroup items' isRequered={true} type='Array<menuitem>' default='/' description='Array of items'/>
-                    <Prop name='menuitem id' isRequered={true} type='string' default='/' description='Menugroup id value'/>
-                    <Prop name='menuitem label' isRequered={true} type='string' default='/' description='Menugroup label text value.'/>
+                    <Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups'/>
+                    <Prop name='activeItemId' isRequired={true} type='string' default='/' description='Id of active item'/>
+                    <Prop name='menugroup label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
+                    <Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
+                    <Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
+                    <Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
                 </PropsList>
             </section>
         )

package/dist/react/ListItems.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { ListItemLoader, PropsList } from "../../../app-typescript";
+
+export default class ListItemsDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">List Items</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <ListItemLoader />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <h3 className="docs-page__h3 docs-page__h3--small-top-m">Loader type of list items</h3>
+                <p className="docs-page__paragraph">Basic layout structure for list elements. The content inside the elements serves just as an example.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row">
+                            <ListItemLoader />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <ListItemLoader />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+                
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+
+                </PropsList>
+            </section>
+        )
+    }
+}

package/dist/react/Menu.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+
+import * as Markup from '../../js/react';
+
+import {Button, Menu, Prop, PropsList} from '../../../app-typescript';
+import {IMenuItem} from '../../../app-typescript/components/Menu';
+
+const menuItems: Array<IMenuItem> = [
+    {
+        label: 'Edit',
+        icon: 'icon-pencil',
+        onClick: () => console.log('action: Edit'),
+    },
+    {
+        label: 'Edit in the new window',
+        icon: 'icon-pencil',
+        onClick: () => console.log('action: Edit in the new window'),
+    },
+    {
+        label: 'Translate',
+        icon: 'icon-globe',
+        children: [
+            {
+                label: 'German',
+                onClick: () => console.log('action: German'),
+            },
+            {
+                label: 'French',
+                onClick: () => console.log('action: French'),
+            },
+        ],
+    },
+    {
+        label: 'Export',
+        icon: 'icon-download',
+        disabled: true,
+        onClick: () => console.log('action: Export'),
+    },
+    {
+        label: 'Spike item',
+        icon: 'icon-trash',
+        onClick: () => console.log('action: Spike item'),
+    },
+    {separator: true},
+    {
+        label: 'Send to',
+        icon: 'icon-share-alt',
+        onClick: () => console.log('action: Send to'),
+    },
+    {
+        label: 'Export',
+        icon: 'icon-download',
+        onClick: () => console.log('action: Export'),
+    },
+    {
+        label: 'Spike item',
+        icon: 'icon-trash',
+        onClick: () => console.log('action: Spike item'),
+    },
+];
+
+export class MenuDocs extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+
+                <h2 className='docs-page__h2'>Menu</h2>
+
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <Menu items={menuItems}>
+                                    {(toggle) => (
+                                        <Button
+                                            text="open menu"
+                                            onClick={(event) => {
+                                                toggle(event);
+                                            }}
+                                        />
+                                    )}
+                                </Menu>
+                            </div>
+                        </div>
+
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        const menuItems = [
+                            {
+                                label: 'Action 1',
+                                icon: 'icon-globe',
+                                children: [
+                                    {
+                                        label: 'Action item 2',
+                                        icon: 'icon-globe',
+                                        onClick: () => console.log('action: Action item 2'),
+                                    },
+                                ],
+                            },
+                        ];
+
+                        <Menu items={menuItems}>
+                            {(toggle) => (
+                                <Button
+                                    text="open menu"
+                                    onClick={(event) => {
+                                        toggle(event);
+                                    }}
+                                />
+                            )}
+                        </Menu>
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+
+                <PropsList>
+                    <Prop name='items' isRequired={true} type='array' default='' description='Array of objects. Allowed objects are: "Menu branch", "Menu leaf" or "Divider"'/>
+
+                    <Prop
+                        name='children'
+                        isRequired={true}
+                        type='function'
+                        default=''
+                        description='Will have `toggle` function as an argument. Has to return a JSX element that will act a trigger for the menu.'
+                    />
+                </PropsList>
+
+                <p className='docs-page__paragraph'>Menu branch</p>
+                <PropsList>
+                    <Prop name='label' isRequired={true} type='string' default='' description='Name for menu group'/>
+                    <Prop name='icon' isRequired={false} type='string' default='' description='Available icons are listed in /#/react/icon-font'/>
+                    <Prop
+                        name='children'
+                        isRequired={true}
+                        type='array'
+                        default=''
+                        description='Array of objects. Allowed objects are: "Menu branch", "Menu leaf" or "Divider"'
+                    />
+                </PropsList>
+
+                <p className='docs-page__paragraph'>Menu leaf</p>
+                <PropsList>
+                    <Prop name='label' isRequired={true} type='string' default='' description='Name for menu item'/>
+                    <Prop name='icon' isRequired={false} type='string' default='' description='Available icons are listed in /#/react/icon-font'/>
+                    <Prop name='onClick' isRequired={true} type='function' default='' description=''/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='' description=''/>
+                </PropsList>
+
+                <p className='docs-page__paragraph'>Menu separator</p>
+                <PropsList>
+                    <Prop name='separator' isRequired={true} type='boolean' default='' description='Adds a separator between items.'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/dist/react/Modal.tsx

@@ -72,15 +72,15 @@ export default class ModalDoc extends React.Component<{}, IState> {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='id' isRequered={false} type='string' default='null' 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='visible' isRequered={true} type='boolean' default='false' description='Specifies the visibility of the dialog' />
-                    <Prop name='headerTemplate' isRequered={false} type='element' default='null' description='Label of header' />
-                    <Prop name='footerTemplate' isRequered={false} type='element' default='null' description='Label of footer' />
-                    <Prop name='closeOnEscape' isRequered={false} type='boolean' default='null' description='An array of objects to display' />
-                    <Prop name='onShow' isRequered={false} type='function' default='null' description='Callback to invoke after modal is opened' />
-                    <Prop name='onHide' isRequered={true} type='function' default='null' description='Callback to invoke after modal is closed' />
+                    <Prop name='id' isRequired={false} type='string' default='null' 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='visible' isRequired={true} type='boolean' default='false' description='Specifies the visibility of the dialog' />
+                    <Prop name='headerTemplate' isRequired={false} type='element' default='null' description='Label of header' />
+                    <Prop name='footerTemplate' isRequired={false} type='element' default='null' description='Label of footer' />
+                    <Prop name='closeOnEscape' isRequired={false} type='boolean' default='null' description='An array of objects to display' />
+                    <Prop name='onShow' isRequired={false} type='function' default='null' description='Callback to invoke after modal is opened' />
+                    <Prop name='onHide' isRequired={true} type='function' default='null' description='Callback to invoke after modal is closed' />
                 </PropsList>
             </section>
         )

package/dist/react/NavButtons.tsx

@@ -59,13 +59,13 @@ export default class NavButtonsDoc 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='text' isRequered={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
-                    <Prop name='iconSize' isRequered={false} type='small | big' default='small' description='Specifies a small or big button' />
-                    <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='state' isRequered={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
-                    <Prop name='theme' isRequered={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
-                    <Prop name='value' isRequered={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
+                    <Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
+                    <Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
+                    <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='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
+                    <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
+                    <Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />
                 </PropsList>
             </section>
         );

package/dist/react/Popover.tsx

@@ -59,13 +59,13 @@ export class PopoverDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='title' isRequered={true} type='string' default='null' description='Title of the popover component.' />
-                    <Prop name='triggerSelector' isRequered={true} type='string' default='null' description='ID selector for an element that will be used to toggle the popover.' />
-                    <Prop name='displayCloseButton' isRequered={false} type='boolean' default='true' description='Show or hide the close button.' />
-                    <Prop name='placement' isRequered={false}
+                    <Prop name='title' isRequired={true} type='string' default='null' description='Title of the popover component.' />
+                    <Prop name='triggerSelector' isRequired={true} type='string' default='null' description='ID selector for an element that will be used to toggle the popover.' />
+                    <Prop name='displayCloseButton' isRequired={false} type='boolean' default='true' description='Show or hide the close button.' />
+                    <Prop name='placement' isRequired={false}
                           type='auto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-start' 
                           default='auto' description='Define the placement of the Popover.' />
-                    <Prop name='zIndex' isRequered={false} type='number' default='null' description='Defines the z-index of the Popover.' />
+                    <Prop name='zIndex' isRequired={false} type='number' default='null' description='Defines the z-index of the Popover.' />
                 </PropsList>
             </section>
         )

package/dist/react/Radios.tsx

@@ -5,14 +5,14 @@ import * as Components from '../playgrounds/react-playgrounds/components/Index';
 import { Radio, RadioButton, CheckGroup, CheckButtonGroup, Alert, Prop, PropsList } from '../../../app-typescript';
 
 interface IState {
-    value1: any;
-    value2: any;
-    value3: any;
-    value4: any;
-    value5: any;
-    value6: any;
-    value7: any;
-    value8: any;
+    value1?: string;
+    value2?: string;
+    value3?: string;
+    value4?: string;
+    value5?: string;
+    value6?: string;
+    value7?: string;
+    value8?: string;
 }
 
 export default class RadiosDoc extends React.Component<{}, IState> {
@@ -20,14 +20,14 @@ export default class RadiosDoc extends React.Component<{}, IState> {
         super(props);
 
         this.state = {
-            value1: true,
-            value2: true,
-            value3: true,
-            value4: true,
-            value5: true,
-            value6: true,
-            value7: true,
-            value8: true,
+            value1: undefined,
+            value2: undefined,
+            value3: undefined,
+            value4: undefined,
+            value5: undefined,
+            value6: undefined,
+            value7: undefined,
+            value8: undefined,
         };
     }
     render() {
@@ -368,22 +368,22 @@ export default class RadiosDoc extends React.Component<{}, IState> {
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">Radio</p>
                 <PropsList>
-                    <Prop name='value' isRequered={true} type='T' default='/' description='The value of the checked button.'/>
-                    <Prop name='options' isRequered={true} type='Array' default='/' description='Array of Radio options.'/>
-                    <Prop name='options label' isRequered={true} type='string' default='/' description='Label text value for Radio.'/>
-                    <Prop name='options value' isRequered={true} type='T' default='/' description='Value of the Radio.'/>
-                    <Prop name='options disabled' isRequered={false} type='boolean' default='false' description='Disables the Radio, preventing mouse events.'/>
-                    <Prop name='labelSide' isRequered={false} type='left | right' default='right' description='Position of label relative to the button.'/>
+                    <Prop name='value' isRequired={true} type='T' default='/' description='The value of the checked button.'/>
+                    <Prop name='options' isRequired={true} type='Array' default='/' description='Array of Radio options.'/>
+                    <Prop name='options label' isRequired={true} type='string' default='/' description='Label text value for Radio.'/>
+                    <Prop name='options value' isRequired={true} type='T' default='/' description='Value of the Radio.'/>
+                    <Prop name='options disabled' isRequired={false} type='boolean' default='false' description='Disables the Radio, preventing mouse events.'/>
+                    <Prop name='labelSide' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
                 </PropsList>
                 <p className="docs-page__paragraph">Radio Button</p>
                 <PropsList>
-                    <Prop name='value' isRequered={true} type='any' default='/' description='The value of the checked button.'/>
-                    <Prop name='options' isRequered={true} type='Array<option>' default='/' description='Array of RadioButton options.'/>
-                    <Prop name='option label' isRequered={true} type='string' default='/' description='Label text value for RadioButton.'/>
-                    <Prop name='option value' isRequered={true} type='any' default='/' description='Value of the Radio.'/>
-                    <Prop name='option disabled' isRequered={false} type='boolean' default='false' description='Disables the Radio, preventing mouse events.'/>
-                    <Prop name='option labelHidden' isRequered={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
-                    <Prop name='option icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='value' isRequired={true} type='any' default='/' description='The value of the checked button.'/>
+                    <Prop name='options' isRequired={true} type='Array<option>' default='/' description='Array of RadioButton options.'/>
+                    <Prop name='option label' isRequired={true} type='string' default='/' description='Label text value for RadioButton.'/>
+                    <Prop name='option value' isRequired={true} type='any' default='/' description='Value of the Radio.'/>
+                    <Prop name='option disabled' isRequired={false} type='boolean' default='false' description='Disables the Radio, preventing mouse events.'/>
+                    <Prop name='option labelHidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
+                    <Prop name='option icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
                 </PropsList>
             </section>
         )

package/dist/react/SelectGrid.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { SelectGrid, Alert, PropsList, Prop } from "../../../app-typescript";
+
+const SelectGridDocs = () => {
+    const letters = [
+        { value: 'A', label: 'A' },
+        { value: 'B', label: 'B' },
+        { value: 'C', label: 'C' },
+        { value: 'D', label: 'D' },
+        { value: 'E', label: 'E' },
+        { value: 'F', label: 'F' },
+        { value: 'G', label: 'G' },
+        { value: 'H', label: 'H' },
+        { value: 'K', label: 'K' },
+        { value: 'L', label: 'L' },
+        { value: 'M', label: 'M' },
+        { value: 'N', label: 'N' },
+        { value: 'O', label: 'O' },
+        { value: 'P', label: 'P' },
+        { value: 'R', label: 'R' },
+        { value: 'S', label: 'S' },
+        { value: 'T', label: 'T' },
+        { value: 'U', label: 'U' }
+    ];
+
+    const [selectedItem, setSelectedItem] = React.useState(letters[0]);
+
+    return (
+        <section className="docs-page__container">
+            <h2 className="docs-page__h2">Select Grid</h2>
+            <p className="docs-page__paragraph">Universal select component with grid display of items. You can define your own trigger and item template.</p>
+            <p className="docs-page__paragraph">IconPicker is built on top of it.</p>
+            <Markup.ReactMarkupCodePreview>{`
+                    <SelectGrid
+                        label="Label"
+                        filterPlaceholder="Search..."
+                        getItems={(searchString) => {
+                            return new Promise((resolve) => {
+                                resolve([{ value: 'value', label: 'Label' }]);
+                            });
+                        }}
+                        onChange={(value) => { }}
+                        itemTemplate={({ item }) => <div />}
+                        triggerTemplate={() => <button />}
+                    />
+                `}
+            </Markup.ReactMarkupCodePreview>
+            <Markup.ReactMarkup>
+                <Markup.ReactMarkupPreview>
+                    <SelectGrid
+                        label="Letter"
+                        filterPlaceholder="Search..."
+                        getItems={(searchString) => {
+                            return new Promise((resolve) => {
+                                if (searchString == null) {
+                                    resolve(letters);
+                                } else {
+                                    resolve(letters.filter(({ label }) => label.toLocaleLowerCase().includes(searchString.toLocaleLowerCase())));
+                                }
+                            });
+                        }}
+                        onChange={(value) => {
+                            setSelectedItem(value);
+                        }}
+                        itemTemplate={({ item }) => <div style={{ fontSize: '20px' }}>{item.label}</div>}
+                        triggerTemplate={({ onClick }) => <button className="btn" onClick={onClick}>{selectedItem.label}</button>}
+
+                    />
+                </Markup.ReactMarkupPreview>
+                <Markup.ReactMarkupCode>{`
+                    const letters = [
+                        { value: 'A', label: 'A' },
+                        { value: 'B', label: 'B' },
+                        { value: 'C', label: 'C' },
+                        ...
+                    ];
+
+                    const [selectedItem, setSelectedItem] = React.useState(letters[0]);
+                    ...
+                    <SelectGrid
+                        label="Letter"
+                        filterPlaceholder="Search..."
+                        getItems={(searchString) => {
+                            return new Promise((resolve) => {
+                                if (searchString == null) {
+                                    resolve(letters);
+                                } else {
+                                    resolve(letters.filter(({ label }) => label.toLocaleLowerCase().includes(searchString.toLocaleLowerCase())));
+                                }
+                            });
+                        }}
+                        onChange={(value) => {
+                            setSelectedItem(value);
+                        }}
+                        itemTemplate={({ item }) => <div style={{ fontSize: '20px' }}>{item.label}</div>}
+                        triggerTemplate={({ onClick }) => <button className="btn" onClick={onClick}>{selectedItem.label}</button>}
+
+                    />
+                `}</Markup.ReactMarkupCode>
+            </Markup.ReactMarkup>
+
+            <h3 className="docs-page__h3">Props</h3>
+            <PropsList>
+                <Prop name='label' isRequired={true} type='string' default='null' description='Select label' />
+                <Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
+                <Prop name='getItems' isRequired={true} type='function' default='false' description='Callback function that should return promise which resolves with array of items' />
+                <Prop name='onChange' isRequired={true} type='function' default='false' description='Callback on change event' />
+                <Prop name='itemTemplate' isRequired={true} type='Component' default='null' description='item renderer' />
+                <Prop name='triggerTemplate' isRequired={true} type='Component' default='null' description='trigger button renderer' />
+            </PropsList>
+            <Alert style='hollow' size='normal' type='alert' restoreIcon='info'>
+                1. triggerTemplate should include &#x3C;button /&#x3E; with onClick event. Otherwise keyboard controls won't work. <br />
+                2. Item should be an object with at least label and value.
+            </Alert>
+        </section>
+    )
+}
+
+
+export default SelectGridDocs;