superdesk-ui-framework 3.1.4 → 3.1.6

package/app-typescript/components/TreeSelect/TreeSelect.tsx

@@ -13,6 +13,15 @@ import {TreeSelectPill} from './TreeSelectPill';
 import {getPrefixedItemId, TreeSelectItem} from './TreeSelectItem';
 import {keyboardNavigation} from './KeyboardNavigation';
 import {WithPortal} from '../WithPortal';
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
+
+const reorder = (list: Array<any>, startIndex: number, endIndex: number) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+
+    return result;
+};
 
 interface IState<T> {
     value: Array<T>;
@@ -42,7 +51,10 @@ interface IPropsBase<T> extends IInputWrapper {
     singleLevelSearch?: boolean;
     placeholder?: string;
     searchPlaceholder?: string;
+    noResultsFoundMessage?: string;
+    dropdownInitiallyOpen?: boolean;
     zIndex?: number;
+    sortable?: boolean;
     'data-test-id'?: string;
     getLabel(item: T): string;
     getId(item: T): string;
@@ -112,7 +124,6 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.onMouseDown = this.onMouseDown.bind(this);
         this.onKeyDown = this.onKeyDown.bind(this);
         this.onPressEsc = this.onPressEsc.bind(this);
-
         this.dropdownRef = React.createRef();
         this.ref = React.createRef();
         this.inputRef = React.createRef();
@@ -120,6 +131,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.openDropdownRef = React.createRef();
         this.treeSelectRef = React.createRef();
         this.popperInstance = null;
+        this.onDragEnd = this.onDragEnd.bind(this);
     }
 
     inputFocus = () => {
@@ -185,6 +197,10 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         document.addEventListener("mousedown", this.onMouseDown);
         document.addEventListener("keydown", this.onKeyDown);
         document.addEventListener("keydown", this.onPressEsc);
+
+        if (this.props.dropdownInitiallyOpen) {
+            this.setState({openDropdown: true});
+        }
     }
 
     componentWillUnmount(): void {
@@ -501,34 +517,39 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 });
             }
         } else if (this.props.kind === 'asynchronous') {
-            return this.state.options.map((item, i) => {
-                let selectedItem = this.state.value.some((obj) =>
-                    this.props.getId(obj) === this.props.getId(item.value),
-                );
+            if (this.state.options.length > 0) {
+                return this.state.options.map((item, i) => {
+                    let selectedItem = this.state.value.some((obj) =>
+                        this.props.getId(obj) === this.props.getId(item.value),
+                    );
 
-                return (
-                    <li
-                        key={i}
-                        className='suggestion-item suggestion-item--multi-select'
-                        onClick={(event) => {
-                            this.handleValue(event, item);
-                        }}
-                    >
-                        <button className="suggestion-item--btn" data-test-id="option">
-                            {this.props.optionTemplate
-                                ? this.props.optionTemplate(item.value)
-                                : (
-                                    <span
-                                        className={selectedItem ? 'suggestion-item--selected' : undefined}
-                                    >
-                                        {this.props.getLabel(item.value)}
-                                    </span>
-                                )
-                            }
-                        </button>
-                    </li>
-                );
-            });
+                    return (
+                        <li
+                            key={i}
+                            className='suggestion-item suggestion-item--multi-select'
+                            onClick={(event) => {
+                                this.handleValue(event, item);
+                            }}
+                        >
+                            <button className="suggestion-item--btn" data-test-id="option">
+                                {this.props.optionTemplate
+                                    ? this.props.optionTemplate(item.value)
+                                    : (
+                                        <span
+                                            className={selectedItem ? 'suggestion-item--selected' : undefined}
+                                        >
+                                            {this.props.getLabel(item.value)}
+                                        </span>
+                                    )
+                                }
+                            </button>
+                        </li>
+                    );
+                });
+
+            } else {
+                return <li className="suggestion-item--nothing-found">{this.props.noResultsFoundMessage ?? 'Nothing found'}</li>;
+            }
         } else {
             return;
         }
@@ -591,18 +612,31 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
 
         if (this.props.kind === 'asynchronous') {
             if (this.state.searchFieldValue) {
-                this.setState({
-                    loading: true,
-                });
-
                 this.ICancelFn = this.props.searchOptions(this.state.searchFieldValue, (items) => {
                     this.setState({options: items, loading: false});
                     this.popperInstance?.update();
                 });
+            } else {
+                this.setState({options: this.state.firstBranchOptions, loading: false});
             }
         }
     }
 
+    onDragEnd(result: DropResult) {
+        if (!result.destination) {
+            return;
+        }
+
+        const value = reorder(
+            this.state.value,
+            result.source.index,
+            result.destination.index,
+        );
+        this.setState({
+            value: value,
+        });
+    }
+
     render() {
         if (this.props.preview) {
             return (
@@ -624,6 +658,43 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
             );
         }
 
+        const ListWrapper = this.props.sortable
+            ? ({children}: {children: React.ReactNode}) => (
+                <DragDropContext onDragEnd={this.onDragEnd}>
+                    <Droppable droppableId="droppable" direction="horizontal">
+                        {(provided, _snapshot) => (
+                            <ul
+                                className="tags-input__tag-list"
+                                ref={provided.innerRef}
+                                {...provided.droppableProps}
+                            >
+                                {children}
+                                {provided.placeholder}
+                            </ul>
+                        )}
+                    </Droppable>
+                </DragDropContext>
+            )
+            : ({children}: {children: React.ReactNode}) => <ul className="tags-input__tag-list">{children}</ul>;
+
+        const ItemWrapper = this.props.sortable
+            ? ({children, itemId, i}: {children: React.ReactNode, itemId: string, i: number}) => {
+                return (
+                    <Draggable draggableId={itemId} index={i}>
+                        {(provided2) => (
+                            <div
+                                ref={provided2.innerRef}
+                                {...provided2.draggableProps}
+                                {...provided2.dragHandleProps}
+                            >
+                                {children}
+                            </div>
+                        )}
+                    </Draggable>
+                );
+            }
+            : ({children}: {children: React.ReactNode}) => <React.Fragment>{children}</React.Fragment>;
+
         return (
             <InputWrapper
                 label={this.props.label}
@@ -672,7 +743,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                 </button>
                             }
 
-                            <ul className="tags-input__tag-list">
+                            <ListWrapper>
                                 {this.state.value.map((item, i: number) => {
                                     const Wrapper: React.ComponentType<{backgroundColor?: string}>
                                     = ({backgroundColor, children}) => (
@@ -684,25 +755,30 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                             backgroundColor={backgroundColor}
                                             onRemove={() => this.removeClick(i)}
                                             getBackgroundColor={this.props.getBackgroundColor}
+                                            draggable={this.props.sortable}
                                         >
                                             {children}
                                         </TreeSelectPill>
                                     );
 
+                                    const itemId = this.props.getId(item);
+
                                     return (
-                                        <React.Fragment key={i}>
+                                        <ItemWrapper itemId={itemId} key={itemId} i={i}>
                                             {this.props.valueTemplate
                                                 ? this.props.valueTemplate(item, Wrapper)
                                                 : (
                                                     <Wrapper>
-                                                        <span>{this.props.getLabel(item)}</span>
+                                                        <span>
+                                                            {this.props.getLabel(item)}
+                                                        </span>
                                                     </Wrapper>
                                                 )
                                             }
-                                        </React.Fragment>
+                                        </ItemWrapper>
                                     );
                                 })}
-                            </ul>
+                            </ListWrapper>
 
                             {this.state.value.length > 0
                                 ? (this.props.readOnly || this.props.disabled)
@@ -842,7 +918,11 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                                 this.ICancelFn();
                                             }
 
-                                            this.setState({searchFieldValue: event.target.value, options: []});
+                                            this.setState({
+                                                searchFieldValue: event.target.value,
+                                                options: [],
+                                                loading: true,
+                                            });
                                             this.popperInstance?.update();
                                             this.debounceFn();
                                         } else {

package/app-typescript/components/TreeSelect/TreeSelectPill.tsx

@@ -1,4 +1,6 @@
+import classNames from 'classnames';
 import * as React from "react";
+import {DragHandle} from '../DragHandle';
 import {Icon} from "../Icon";
 import {getTextColor} from '../Label';
 
@@ -10,19 +12,19 @@ interface IProps<T> {
     onRemove(): void;
     valueTemplate?(item: T, Wrapper: React.ElementType): React.ComponentType<T> | JSX.Element;
     getBackgroundColor?(item: T): string;
+    draggable?: boolean;
 }
 
 export class TreeSelectPill<T> extends React.Component<IProps<T>> {
     render() {
+        const classes = classNames('tags-input__tag-item tags-input__tag-item--multi-select', {
+            'tags-input__tag-item--readonly': this.props.readOnly,
+            'tags-input__tag-item--draggable': this.props.draggable,
+        });
+
         return (
             <li
-                className={
-                    "tags-input__tag-item tags-input__tag-item--multi-select"
-                    + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')
-                }
-                onClick={() => (!this.props.readOnly && !this.props.disabled)
-                    && this.props.onRemove()
-                }
+                className={classes}
                 style={
                     this.props.valueTemplate
                         ? {backgroundColor: this.props.backgroundColor}
@@ -31,6 +33,9 @@ export class TreeSelectPill<T> extends React.Component<IProps<T>> {
                 }
                 data-test-id="item"
             >
+                {this.props.draggable && (
+                    <DragHandle blank={true} dotsInRow='3' dotRows='4' />
+                )}
                 <span
                     className="tags-input__helper-box"
                     style={{
@@ -43,9 +48,15 @@ export class TreeSelectPill<T> extends React.Component<IProps<T>> {
                     {this.props.children}
 
                     {!this.props.readOnly
-                        && <span className="tags-input__remove-button" data-test-id="remove">
+                        && <button
+                            className="tags-input__remove-button"
+                            data-test-id="remove"
+                            onClick={() => (!this.props.readOnly && !this.props.disabled)
+                                && this.props.onRemove()
+                            }
+                        >
                             <Icon name="close-small"></Icon>
-                        </span>
+                        </button>
                     }
                 </span>
             </li>

package/{examples/pages/react → dist/components}/Index.tsx

@@ -64,13 +64,17 @@ import { MultiselectDocs } from './MultiSelect';
 import { TreeSelectDocs } from './TreeSelect';
 import { TreeMenuDocs } from './TreeMenu';
 import DurationInputDoc from './DurationInput';
-import {WithPaginationDocs} from './WithPaginationDocs';
+import { WithPaginationDocs } from './WithPaginationDocs';
 import { PopoverDoc } from './Popover';
 import { MenuDocs } from './Menu';
-import {WithSizeObserverDocs} from './WithSizeObserver';
-import {ResizablePanelsDoc} from './ResizablePanels';
+import { WithSizeObserverDocs } from './WithSizeObserver';
+import { ResizablePanelsDoc } from './ResizablePanels';
 import { IllustrationButtonDoc } from './IllustrationButton';
 
+// Utilities
+import {SpacingUtilitiesDoc} from './utilities/SpacingUtilities';
+import {TextUtilitiesDoc} from './utilities/TextUtilities';
+
 const pages = {
     basicComponents: {
         name: 'Basic Components',
@@ -291,6 +295,17 @@ const pages = {
                 name: 'Big icon font'
             }
         }
+    },
+    utilityClasses: {
+        name: "Utility classes",
+        items: {
+            'spacing-utilities': {
+                name: 'Spacing Utilities',
+            },
+            'text-utilities': {
+                name: 'Text utilities'
+            }
+        }
     }
 }
 interface IProps {
@@ -344,66 +359,69 @@ class ReactDoc extends React.Component<IProps, IState> {
                         </Dropdown>
                     </div>
                     <Switch>
-                        <Route path="/react/buttons" component={ButtonsDoc} />
-                        <Route path="/react/icon-buttons" component={IconButtonDoc} />
-                        <Route path="/react/button-groups" component={ButtonGroupsDoc} />
-                        <Route path="/react/labels" component={LabelsDoc} />
-                        <Route path="/react/icon-labels" component={IconLabelDoc} />
-                        <Route path="/react/badges" component={BadgesDoc} />
-                        <Route path="/react/alerts" component={AlertDoc} />
-                        <Route path="/react/avatar" component={AvatarDoc} />
-                        <Route path="/react/tooltips" component={TooltipDoc} />
-                        <Route path="/react/tags" component={TagDoc} />
-                        <Route path="/react/inputs" component={InputsDoc} />
-                        <Route path="/react/autocomplete" component={AutocompleteDoc} />
-                        <Route path="/react/select" component={SelectsDoc} />
-                        <Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
-                        <Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
-                        <Route path="/react/multiselect" component={MultiselectDocs} />
-                        <Route path="/react/treeselect" component={TreeSelectDocs} />
-                        <Route path="/react/treemenu" component={TreeMenuDocs} />
-                        <Route path="/react/duration-input" component={DurationInputDoc} />
-                        <Route path="/react/with-pagination" component={WithPaginationDocs} />
-                        <Route path="/react/popover" component={PopoverDoc} />
-                        <Route path="/react/date-picker" component={DatePickerDoc} />
-                        <Route path="/react/time-picker" component={TimePickerDoc} />
-                        <Route path="/react/switch" component={SwitchDoc} />
-                        <Route path="/react/radiogroup" component={RadioGroupDoc} />
-                        <Route path="/react/checkbox" component={CheckboxsDoc} />
-                        <Route path="/react/tab" component={TabsDoc} />
-                        <Route path="/react/left-navigation" component={LeftNavigationsDoc} />
-                        <Route path="/react/Quick-navigation-bar" component={QuickNavBarDoc} />
-                        <Route path="/react/nav-buttons" component={NavButtonsDoc} />
-                        <Route path="/react/icon-font" component={IconFontDoc} />
-                        <Route path="/react/big-icon-font" component={BigIconFontDoc} />
-                        <Route path="/react/sub-navigation" component={SubNavDoc} />
-                        <Route path="/react/dropdowns" component={DropdownDoc} />
-                        <Route path="/react/toast" component={ToastsDoc} />
-                        <Route path="/react/drag-handle" component={DragHandleDocs} />
-                        <Route path="/react/tag-input" component={TagInputDocs} />
-                        <Route path="/react/empty-states" component={EmptyStateDoc} />
-                        <Route path="/react/grid-list" component={GridListDoc} />
-                        <Route path="/react/grid-item" component={GridItemDoc} />
-                        <Route path="/react/modal" component={ModalDoc} />
-                        <Route path="/react/carousel" component={CarouselDoc} />
-                        <Route path="/react/content-divider" component={ContentDividerDoc} />
-                        <Route path="/react/menu" component={MenuDocs} />
-                        <Route path="/react/togglebox" component={ToggleboxDocs} />
-                        <Route path="/react/list-items" component={ListItemsDoc} />
-                        <Route path="/react/panel" component={PanelDoc} />
-                        <Route path="/react/select-grid" component={SelectGridDocs} />
-                        <Route path="/react/icon-picker" component={IconPickerDocs} />
-                        <Route path="/react/simple-list" component={SimpleListDoc} />
-                        <Route path="/react/boxed-list" component={BoxedListDoc} />
-                        <Route path="/react/table-list" component={TableListDoc} />
-                        <Route path="/react/content-list" component={ContentListDoc} />
-                        <Route path="/react/heading" component={HeadingDoc} />
-                        <Route path="/react/text" component={TextDoc} />
-                        <Route path="/react/container" component={ContainerDoc} />
-                        <Route path="/react/dropzone" component={DropZoneDoc} />
-                        <Route path="/react/create-button" component={CreateButtonDoc} />
-                        <Route path="/react/resizable-panels" component={ResizablePanelsDoc} />
-                        <Route path="/react/illustration-button" component={IllustrationButtonDoc} />
+                        <Route path="/components/buttons" component={ButtonsDoc} />
+                        <Route path="/components/icon-buttons" component={IconButtonDoc} />
+                        <Route path="/components/button-groups" component={ButtonGroupsDoc} />
+                        <Route path="/components/labels" component={LabelsDoc} />
+                        <Route path="/components/icon-labels" component={IconLabelDoc} />
+                        <Route path="/components/badges" component={BadgesDoc} />
+                        <Route path="/components/alerts" component={AlertDoc} />
+                        <Route path="/components/avatar" component={AvatarDoc} />
+                        <Route path="/components/tooltips" component={TooltipDoc} />
+                        <Route path="/components/tags" component={TagDoc} />
+                        <Route path="/components/inputs" component={InputsDoc} />
+                        <Route path="/components/autocomplete" component={AutocompleteDoc} />
+                        <Route path="/components/select" component={SelectsDoc} />
+                        <Route path="/components/select-with-template" component={SelectWithTemplateDocs} />
+                        <Route path="/components/with-size-observer" component={WithSizeObserverDocs} />
+                        <Route path="/components/multiselect" component={MultiselectDocs} />
+                        <Route path="/components/treeselect" component={TreeSelectDocs} />
+                        <Route path="/components/treemenu" component={TreeMenuDocs} />
+                        <Route path="/components/duration-input" component={DurationInputDoc} />
+                        <Route path="/components/with-pagination" component={WithPaginationDocs} />
+                        <Route path="/components/popover" component={PopoverDoc} />
+                        <Route path="/components/date-picker" component={DatePickerDoc} />
+                        <Route path="/components/time-picker" component={TimePickerDoc} />
+                        <Route path="/components/switch" component={SwitchDoc} />
+                        <Route path="/components/radiogroup" component={RadioGroupDoc} />
+                        <Route path="/components/checkbox" component={CheckboxsDoc} />
+                        <Route path="/components/tab" component={TabsDoc} />
+                        <Route path="/components/left-navigation" component={LeftNavigationsDoc} />
+                        <Route path="/components/Quick-navigation-bar" component={QuickNavBarDoc} />
+                        <Route path="/components/nav-buttons" component={NavButtonsDoc} />
+                        <Route path="/components/icon-font" component={IconFontDoc} />
+                        <Route path="/components/big-icon-font" component={BigIconFontDoc} />
+                        <Route path="/components/sub-navigation" component={SubNavDoc} />
+                        <Route path="/components/dropdowns" component={DropdownDoc} />
+                        <Route path="/components/toast" component={ToastsDoc} />
+                        <Route path="/components/drag-handle" component={DragHandleDocs} />
+                        <Route path="/components/tag-input" component={TagInputDocs} />
+                        <Route path="/components/empty-states" component={EmptyStateDoc} />
+                        <Route path="/components/grid-list" component={GridListDoc} />
+                        <Route path="/components/grid-item" component={GridItemDoc} />
+                        <Route path="/components/modal" component={ModalDoc} />
+                        <Route path="/components/carousel" component={CarouselDoc} />
+                        <Route path="/components/content-divider" component={ContentDividerDoc} />
+                        <Route path="/components/menu" component={MenuDocs} />
+                        <Route path="/components/togglebox" component={ToggleboxDocs} />
+                        <Route path="/components/list-items" component={ListItemsDoc} />
+                        <Route path="/components/panel" component={PanelDoc} />
+                        <Route path="/components/select-grid" component={SelectGridDocs} />
+                        <Route path="/components/icon-picker" component={IconPickerDocs} />
+                        <Route path="/components/simple-list" component={SimpleListDoc} />
+                        <Route path="/components/boxed-list" component={BoxedListDoc} />
+                        <Route path="/components/table-list" component={TableListDoc} />
+                        <Route path="/components/content-list" component={ContentListDoc} />
+                        <Route path="/components/heading" component={HeadingDoc} />
+                        <Route path="/components/text" component={TextDoc} />
+                        <Route path="/components/container" component={ContainerDoc} />
+                        <Route path="/components/dropzone" component={DropZoneDoc} />
+                        <Route path="/components/create-button" component={CreateButtonDoc} />
+                        <Route path="/components/resizable-panels" component={ResizablePanelsDoc} />
+                        <Route path="/components/illustration-button" component={IllustrationButtonDoc} />
+                        {/* Utilities */}
+                        <Route path="/components/spacing-utilities" component={SpacingUtilitiesDoc} />
+                        <Route path="/components/text-utilities" component={TextUtilitiesDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>

package/dist/{react → components}/TreeSelect.tsx

@@ -252,7 +252,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     label='TreeSelect Label'
                                     info='Info Message'
                                     searchPlaceholder='Search...'
-                                    getBackgroundColor={(item: any) => item.bgColor} 
+                                    getBackgroundColor={(item: any) => item.bgColor}
                                     valueTemplate={(item, Wrapper) => {
                                         return (
                                             <Wrapper backgroundColor={item.bgColor}>
@@ -278,7 +278,65 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                             label='TreeSelect Label'
                             info='Info Message'
                             searchPlaceholder='Search...'
-                            getBackgroundColor={(item: any) => item.bgColor} 
+                            getBackgroundColor={(item: any) => item.bgColor}
+                            valueTemplate={(item, Wrapper) => {
+                                return (
+                                    <Wrapper backgroundColor={item.bgColor}>
+                                        <span>{item.name}</span>
+                                    </Wrapper>
+                                );
+                            }}
+                            onChange={(e) => false}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <p className='docs-page__paragraph'>Sortable mode in TreeSelect.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    kind='synchronous'
+                                    value={[{name: 'Category1'}, {name: 'Category2'}, {name: 'Category3'}]}
+                                    getOptions={() => options}
+                                    getId={(item) => item.name}
+                                    getLabel={(item) => item.name}
+                                    selectBranchWithChildren
+                                    allowMultiple
+                                    sortable
+                                    label='TreeSelect Label'
+                                    info='Info Message'
+                                    searchPlaceholder='Search...'
+                                    getBackgroundColor={(item: any) => item.bgColor}
+                                    valueTemplate={(item, Wrapper) => {
+                                        return (
+                                            <Wrapper backgroundColor={item.bgColor}>
+                                                <span>{item.name}</span>
+                                            </Wrapper>
+                                        );
+                                    }}
+                                    onChange={(e) => false}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            kind='synchronous'
+                            value={[{name: 'Category1'}]}
+                            getOptions={() => options}
+                            getId={(item) => item.name}
+                            getLabel={(item) => item.name}
+                            selectBranchWithChildren
+                            allowMultiple
+                            sortable
+                            label='TreeSelect Label'
+                            info='Info Message'
+                            searchPlaceholder='Search...'
+                            getBackgroundColor={(item: any) => item.bgColor}
                             valueTemplate={(item, Wrapper) => {
                                 return (
                                     <Wrapper backgroundColor={item.bgColor}>
@@ -401,6 +459,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <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='sortable' isRequired={false} type='boolean' default='/' description='Enable drag & drop functionality.'/>
                     <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.'/>
@@ -409,7 +468,6 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <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='Label of component.' />
                     <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />