@singularsystems/neo-react 1.0.0-alpha.3 → 1.0.0-beta.1

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -1,188 +1,225 @@
-import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
-import React from 'react';
-import { EnumHelper, Misc, Utils } from '@singularsystems/neo-core';
-import { observer } from 'mobx-react';
-import { DropDownBase } from './DropDownBase';
-import { BindPropsHelper } from '../PropTypes';
-import { InputHelpers } from '../InputHelpers';
-import { EditorParentType, FormContext } from '../FormContext';
-import { Tooltip } from '../_Exports';
-import { NeoReactTypes } from '../../Modules/Types';
-var AutoCompleteDropDown = /** @class */ (function (_super) {
-    __extends(AutoCompleteDropDown, _super);
-    function AutoCompleteDropDown(props) {
-        var _this = _super.call(this, props) || this;
-        _this.asyncSelectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.AsyncSelect);
-        _this.selectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.ReactSelect);
-        _this.onKeyPress = _this.onKeyPress.bind(_this);
-        _this.onItemSelected = _this.onItemSelected.bind(_this);
-        return _this;
-    }
-    AutoCompleteDropDown.prototype.onKeyPress = function (searchValue, dataReceived) {
-        var _this = this;
-        var _a, _b;
-        if (searchValue && searchValue.length >= ((_a = this.props.minCharacters) !== null && _a !== void 0 ? _a : 1)) {
-            Utils.debounce(this, function () {
-                _this.props.itemSource(searchValue).then(function (list) {
-                    var items;
-                    if (list.data) {
-                        items = list.data;
-                    }
-                    else {
-                        items = list;
-                    }
-                    dataReceived(_this.mapTArrayToOptions(items));
-                });
-            }, (_b = this.props.delayMs) !== null && _b !== void 0 ? _b : 500);
-        }
-        else {
-            dataReceived([]);
-            Utils.clearDebounce(this);
-        }
-    };
-    AutoCompleteDropDown.prototype.mapTArrayToOptions = function (items) {
-        var _this = this;
-        if (items.length) {
-            this.findMembers(items[0]);
-        }
-        return items.map(function (item) { return (__assign(__assign({}, item), { value: item[_this.valueMember], label: item[_this.displayMember] })); });
-    };
-    AutoCompleteDropDown.prototype.onItemSelected = function (args, action) {
-        var onItemSelected = this.props.onItemSelected, singleProps = this.props, multiProps = this.props;
-        if (multiProps.bindItems) {
-            // Multi select
-            var itemList = multiProps.bindItems.value;
-            var bindIdsList = multiProps.bindIds;
-            if (action.action === "select-option") {
-                itemList.push({ id: action.option.value, display: action.option.label });
-                if (bindIdsList) {
-                    bindIdsList.push(action.option.value);
-                }
-                if (onItemSelected) {
-                    onItemSelected(action.option);
-                }
-            }
-            else if (action.action === "remove-value") {
-                var removeItem = itemList.find(function (c) { return c.id === action.removedValue.value; });
-                if (removeItem) {
-                    itemList.remove(removeItem);
-                    if (bindIdsList) {
-                        bindIdsList.remove(removeItem.id);
-                    }
-                }
-                if (onItemSelected) {
-                    onItemSelected(undefined, removeItem);
-                }
-            }
-            else if (action.action === "clear") {
-                itemList.length = 0;
-                if (bindIdsList) {
-                    bindIdsList.length = 0;
-                }
-                if (onItemSelected) {
-                    onItemSelected(undefined);
-                }
-            }
-        }
-        else if (this.props.bind) {
-            // Single select
-            singleProps.bind.value = args ? args.value : null;
-            if (singleProps.bindDisplay) {
-                singleProps.bindDisplay.value = args ? args.label : "";
-            }
-            if (onItemSelected) {
-                onItemSelected(args);
-            }
-        }
-    };
-    AutoCompleteDropDown.prototype.render = function () {
-        var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        var _j = this.props, bind = _j.bind, bindDisplay = _j.bindDisplay, bindItems = _j.bindItems, bindIds = _j.bindIds, itemSource = _j.itemSource, items = _j.items, displayMember = _j.displayMember, valueMember = _j.valueMember, descriptionMember = _j.descriptionMember, option = _j.option, noRecordsPrompt = _j.noRecordsPrompt, typeToSearchPrompt = _j.typeToSearchPrompt, delayMs = _j.delayMs, minCharacters = _j.minCharacters, onItemSelected = _j.onItemSelected, otherProps = __rest(_j, ["bind", "bindDisplay", "bindItems", "bindIds", "itemSource", "items", "displayMember", "valueMember", "descriptionMember", "option", "noRecordsPrompt", "typeToSearchPrompt", "delayMs", "minCharacters", "onItemSelected"]);
-        var splitProps = BindPropsHelper.splitCommonEditorProps(otherProps);
-        var nativeProps = splitProps.rest;
-        var bindItemsProperty = bindItems;
-        var itemList = bindItemsProperty === null || bindItemsProperty === void 0 ? void 0 : bindItemsProperty.value;
-        var bindValue = bind;
-        var bindDisplayProperty = bindDisplay;
-        var bindProperty = bindItemsProperty !== null && bindItemsProperty !== void 0 ? bindItemsProperty : bindValue;
-        var displayInfo = bindProperty.validator.getDisplayState(this.context.validationDisplayMode);
-        displayInfo.applyToDom(nativeProps, this.context.parentType !== EditorParentType.FormGroup);
-        this.displayMember = (_a = this.props.displayMember) !== null && _a !== void 0 ? _a : "";
-        this.valueMember = (_b = this.props.valueMember) !== null && _b !== void 0 ? _b : "";
-        var defaultItems = undefined;
-        if (this.props.items) {
-            var items_1 = this.getItems(this.props.items);
-            defaultItems = this.mapTArrayToOptions(items_1);
-            if (descriptionMember === undefined && items_1.length > 0) {
-                if (EnumHelper.isEnumItem(items_1[0])) {
-                    descriptionMember = "description";
-                }
-            }
-        }
-        var value = null;
-        if (bindItems) {
-            value = itemList.map(function (c) { return ({ value: c.id, label: c.display }); });
-        }
-        else {
-            if (bindValue.value !== null) {
-                var displayValue = bindDisplayProperty === null || bindDisplayProperty === void 0 ? void 0 : bindDisplayProperty.value;
-                if (!bindDisplayProperty) {
-                    if (defaultItems) {
-                        displayValue = (_d = (_c = defaultItems.find(function (c) { return c.value === bindValue.value; })) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : "";
-                    }
-                    else {
-                        throw "bindDisplay is required when the items prop is not set.";
-                    }
-                }
-                value = { value: bindValue.value, label: displayValue };
-            }
-            this.setFieldInfo(bindValue, (_e = value === null || value === void 0 ? void 0 : value.label) !== null && _e !== void 0 ? _e : "");
-        }
-        var components = (_f = nativeProps.components) !== null && _f !== void 0 ? _f : {};
-        if (this.props.option) {
-            components.Option = this.getOption(this.props.option);
-        }
-        else if (components.Option) {
-            components.Option = this.getOption(components.Option);
-        }
-        else if (descriptionMember) {
-            components.Option = this.getOption(function (item) { return React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "react-select-name" }, item[_this.displayMember]),
-                React.createElement("div", { className: "react-select-description" }, item[descriptionMember])); }, "with-description");
-        }
-        if (nativeProps.isClearable === undefined) {
-            nativeProps.isClearable = true;
-        }
-        if (splitProps.editor.isDisabled || splitProps.editor.isReadOnly) {
-            nativeProps.isDisabled = true;
-        }
-        nativeProps.className = Utils.joinWithSpaces("react-select-bs", nativeProps.className);
-        if (this.context.uniqueId) {
-            nativeProps.inputId = this.context.uniqueId;
-        }
-        var userOnBlur = nativeProps.onBlur;
-        nativeProps.onBlur = function (e) {
-            bindProperty.validator.hasBlurred = true;
-            if (userOnBlur !== undefined) {
-                userOnBlur(e);
-            }
-        };
-        if (this.props.itemSource !== undefined) {
-            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.asyncSelectImplementation, __assign({}, nativeProps, { placeholder: (_g = this.props.placeholder) !== null && _g !== void 0 ? _g : "", classNamePrefix: "react-select-bs", defaultOptions: defaultItems, loadOptions: this.onKeyPress, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a, _b; return c.inputValue && c.inputValue.length >= (minCharacters !== null && minCharacters !== void 0 ? minCharacters : 1) ? ((_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found") : ((_b = _this.props.typeToSearchPrompt) !== null && _b !== void 0 ? _b : "Type to search..."); }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor), nativeProps);
-        }
-        else {
-            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.selectImplementation, __assign({}, nativeProps, { placeholder: (_h = this.props.placeholder) !== null && _h !== void 0 ? _h : "", classNamePrefix: "react-select-bs", options: defaultItems, isLoading: this.isLoading, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a; return (_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found"; }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor), nativeProps);
-        }
-    };
-    AutoCompleteDropDown.prototype.getOption = function (content, additionalClass) {
-        return function (item) { return (React.createElement("div", __assign({ ref: item.innerRef }, item.innerProps, { className: Utils.joinWithSpaces("react-select-row", additionalClass, item.isFocused ? "focused" : undefined, item.isSelected ? "selected" : undefined) }), content(item.data))); };
-    };
-    AutoCompleteDropDown.contextType = FormContext;
-    AutoCompleteDropDown = __decorate([
-        observer,
-        __metadata("design:paramtypes", [Object])
-    ], AutoCompleteDropDown);
-    return AutoCompleteDropDown;
-}(DropDownBase));
-export default AutoCompleteDropDown;
+import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
+import React from 'react';
+import { EnumHelper, Misc, Model, Utils } from '@singularsystems/neo-core';
+import { observer } from 'mobx-react';
+import { DropDownBase } from './DropDownBase';
+import { BindPropsHelper } from '../PropTypes';
+import { InputHelpers } from '../InputHelpers';
+import { EditorParentType, FormContext } from '../FormContext';
+import { Tooltip } from '../_Exports';
+import { NeoReactTypes } from '../../Modules/Types';
+var AutoCompleteDropDown = /** @class */ (function (_super) {
+    __extends(AutoCompleteDropDown, _super);
+    function AutoCompleteDropDown(props) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this, props) || this;
+        _this.asyncSelectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.AsyncSelect);
+        _this.selectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.ReactSelect);
+        _this.onKeyPress = _this.onKeyPress.bind(_this);
+        _this.onItemSelected = _this.onItemSelected.bind(_this);
+        var singleProps = _this.props, multiProps = _this.props;
+        _this.bindProperty = (_a = singleProps.bind) !== null && _a !== void 0 ? _a : multiProps.bindItems;
+        _this.fieldInfoContainer = Model.ModelFieldInfo.asModelFieldInfoContainer(_this.bindProperty.attachedTo);
+        if (multiProps.bindIds) {
+            if (multiProps.bindIds.propertyInfo) {
+                var bindIdsProperty = multiProps.bindIds;
+                _this.bindIdsProperty = bindIdsProperty;
+                _this.bindIdsList = bindIdsProperty.value;
+            }
+            else {
+                _this.bindIdsList = multiProps.bindIds;
+                if (_this.fieldInfoContainer) {
+                    console.error("Warning: Pass a property instance as 'bindIds', otherwise the display values will not be captured.");
+                    _this.fieldInfoContainer = null;
+                }
+            }
+        }
+        return _this;
+    }
+    AutoCompleteDropDown.getBindProp = function (props) {
+        var _a;
+        return (_a = props.bind) !== null && _a !== void 0 ? _a : props.bindItems;
+    };
+    AutoCompleteDropDown.prototype.onKeyPress = function (searchValue, dataReceived) {
+        var _this = this;
+        var _a, _b;
+        if (searchValue && searchValue.length >= ((_a = this.props.minCharacters) !== null && _a !== void 0 ? _a : 1)) {
+            Utils.debounce(this, function () {
+                _this.props.itemSource(searchValue).then(function (list) {
+                    var items;
+                    if (list.data) {
+                        items = list.data;
+                    }
+                    else {
+                        items = list;
+                    }
+                    dataReceived(_this.mapTArrayToOptions(items));
+                });
+            }, (_b = this.props.delayMs) !== null && _b !== void 0 ? _b : 500);
+        }
+        else {
+            dataReceived([]);
+            Utils.clearDebounce(this);
+        }
+    };
+    AutoCompleteDropDown.prototype.mapTArrayToOptions = function (items) {
+        var _this = this;
+        if (items.length) {
+            this.findMembers(items[0]);
+        }
+        return items.map(function (item) { return (__assign(__assign({}, item), { item: item, value: item[_this.valueMember], label: item[_this.displayMember] })); });
+    };
+    AutoCompleteDropDown.prototype.onItemSelected = function (args, action) {
+        var _a;
+        var onItemSelected = this.props.onItemSelected, singleProps = this.props, multiProps = this.props;
+        if (multiProps.bindItems) {
+            var itemsProperty = multiProps.bindItems;
+            // Multi select
+            var itemList = itemsProperty.value;
+            if (action.action === "select-option") {
+                itemList.push({ id: action.option.value, display: action.option.label });
+                if (this.bindIdsList) {
+                    this.bindIdsList.push(action.option.value);
+                }
+                if (onItemSelected) {
+                    onItemSelected((_a = action.option) === null || _a === void 0 ? void 0 : _a.item);
+                }
+            }
+            else if (action.action === "remove-value") {
+                var removeItem = itemList.find(function (c) { return c.id === action.removedValue.value; });
+                if (removeItem) {
+                    itemList.remove(removeItem);
+                    if (this.bindIdsList) {
+                        this.bindIdsList.remove(removeItem.id);
+                    }
+                }
+                if (onItemSelected) {
+                    onItemSelected(undefined, removeItem);
+                }
+            }
+            else if (action.action === "clear") {
+                itemList.length = 0;
+                if (this.bindIdsList) {
+                    this.bindIdsList.length = 0;
+                }
+                if (onItemSelected) {
+                    onItemSelected(undefined);
+                }
+            }
+            itemsProperty.attachedTo.isSelfDirty = true;
+        }
+        else if (singleProps.bind) {
+            // Single select
+            singleProps.bind.value = args ? args.value : null;
+            if (singleProps.bindDisplay) {
+                singleProps.bindDisplay.value = args ? args.label : "";
+            }
+            if (onItemSelected) {
+                onItemSelected(args === null || args === void 0 ? void 0 : args.item);
+            }
+        }
+    };
+    AutoCompleteDropDown.prototype.render = function () {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _j = this.props, bind = _j.bind, bindDisplay = _j.bindDisplay, bindItems = _j.bindItems, bindIds = _j.bindIds, itemSource = _j.itemSource, items = _j.items, displayMember = _j.displayMember, valueMember = _j.valueMember, descriptionMember = _j.descriptionMember, option = _j.option, noRecordsPrompt = _j.noRecordsPrompt, typeToSearchPrompt = _j.typeToSearchPrompt, delayMs = _j.delayMs, minCharacters = _j.minCharacters, onItemSelected = _j.onItemSelected, fieldInfoLimit = _j.fieldInfoLimit, otherProps = __rest(_j, ["bind", "bindDisplay", "bindItems", "bindIds", "itemSource", "items", "displayMember", "valueMember", "descriptionMember", "option", "noRecordsPrompt", "typeToSearchPrompt", "delayMs", "minCharacters", "onItemSelected", "fieldInfoLimit"]);
+        var splitProps = BindPropsHelper.splitCommonEditorProps(otherProps);
+        var nativeProps = splitProps.rest;
+        var bindItemsProperty = bindItems;
+        var itemList = bindItemsProperty === null || bindItemsProperty === void 0 ? void 0 : bindItemsProperty.value;
+        var bindValue = bind;
+        var bindDisplayProperty = bindDisplay;
+        var displayInfo = this.bindProperty.validator.getDisplayState(this.context.validationDisplayMode);
+        displayInfo.applyToDom(nativeProps, this.context.parentType !== EditorParentType.FormGroup);
+        this.displayMember = (_a = this.props.displayMember) !== null && _a !== void 0 ? _a : "";
+        this.valueMember = (_b = this.props.valueMember) !== null && _b !== void 0 ? _b : "";
+        var defaultItems = undefined;
+        if (this.props.items) {
+            var items_1 = this.getItems(this.props.items);
+            if (this.props.filterPredicate !== undefined) {
+                items_1 = items_1.filter(this.props.filterPredicate);
+            }
+            defaultItems = this.mapTArrayToOptions(items_1);
+            if (descriptionMember === undefined && items_1.length > 0) {
+                if (EnumHelper.isEnumItem(items_1[0])) {
+                    descriptionMember = "description";
+                }
+            }
+        }
+        var value = null;
+        if (bindItems) {
+            value = itemList.map(function (c) { return ({ value: c.id, label: c.display }); });
+            if (this.fieldInfoContainer && this.bindIdsProperty) {
+                var itemListString = "";
+                if (value.length > (fieldInfoLimit !== null && fieldInfoLimit !== void 0 ? fieldInfoLimit : 5)) {
+                    itemListString = "".concat(value.length, " items selected");
+                }
+                else if (value.length > 0) {
+                    itemListString = value.map(function (c) { return c.label; }).join(", ");
+                }
+                this.setFieldInfo(this.bindIdsProperty, itemListString, bindItemsProperty.propertyInfo.readableName);
+            }
+        }
+        else {
+            if (bindValue.value !== null) {
+                var displayValue = bindDisplayProperty === null || bindDisplayProperty === void 0 ? void 0 : bindDisplayProperty.value;
+                if (!bindDisplayProperty) {
+                    if (defaultItems) {
+                        displayValue = (_d = (_c = defaultItems.find(function (c) { return c.value === bindValue.value; })) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : "";
+                    }
+                    else {
+                        throw "bindDisplay is required when the items prop is not set.";
+                    }
+                }
+                value = { value: bindValue.value, label: displayValue };
+            }
+            this.setFieldInfo(bindValue, (_e = value === null || value === void 0 ? void 0 : value.label) !== null && _e !== void 0 ? _e : "");
+        }
+        var components = (_f = nativeProps.components) !== null && _f !== void 0 ? _f : {};
+        if (this.props.option) {
+            components.Option = this.getOption(this.props.option);
+        }
+        else if (components.Option) {
+            components.Option = this.getOption(components.Option);
+        }
+        else if (descriptionMember) {
+            components.Option = this.getOption(function (item) { return React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "react-select-name" }, item[_this.displayMember]),
+                React.createElement("div", { className: "react-select-description" }, item[descriptionMember])); }, "with-description");
+        }
+        if (nativeProps.isClearable === undefined) {
+            nativeProps.isClearable = true;
+        }
+        if (BindPropsHelper.isReadOnly(splitProps.editor, this.context) || BindPropsHelper.isDisabled(splitProps.editor, this.context)) {
+            nativeProps.isDisabled = true;
+        }
+        nativeProps.className = Utils.joinWithSpaces("react-select-bs", nativeProps.className);
+        if (this.context.uniqueId) {
+            nativeProps.inputId = this.context.uniqueId;
+        }
+        var userOnBlur = nativeProps.onBlur;
+        nativeProps.onBlur = function (e) {
+            _this.bindProperty.validator.hasBlurred = true;
+            if (userOnBlur !== undefined) {
+                userOnBlur(e);
+            }
+        };
+        if (this.props.itemSource !== undefined) {
+            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.asyncSelectImplementation, __assign({}, nativeProps, { placeholder: (_g = this.props.placeholder) !== null && _g !== void 0 ? _g : "", classNamePrefix: "react-select-bs", defaultOptions: defaultItems, loadOptions: this.onKeyPress, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a, _b; return c.inputValue && c.inputValue.length >= (minCharacters !== null && minCharacters !== void 0 ? minCharacters : 1) ? ((_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found") : ((_b = _this.props.typeToSearchPrompt) !== null && _b !== void 0 ? _b : "Type to search..."); }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor), nativeProps);
+        }
+        else {
+            return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.selectImplementation, __assign({}, nativeProps, { placeholder: (_h = this.props.placeholder) !== null && _h !== void 0 ? _h : "", classNamePrefix: "react-select-bs", options: defaultItems, isLoading: this.isLoading, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a; return (_a = _this.props.noRecordsPrompt) !== null && _a !== void 0 ? _a : "No records found"; }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor), nativeProps);
+        }
+    };
+    AutoCompleteDropDown.prototype.getOption = function (content, additionalClass) {
+        return function (item) { return (React.createElement("div", __assign({ ref: item.innerRef }, item.innerProps, { className: Utils.joinWithSpaces("react-select-row", additionalClass, item.isFocused ? "focused" : undefined, item.isSelected ? "selected" : undefined) }), content(item.data))); };
+    };
+    AutoCompleteDropDown.contextType = FormContext;
+    AutoCompleteDropDown = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
+    ], AutoCompleteDropDown);
+    return AutoCompleteDropDown;
+}(DropDownBase));
+export default AutoCompleteDropDown;

package/dist/ReactComponents/DropDown/DropDown.d.ts

@@ -1,44 +1,44 @@
-import * as React from 'react';
-import { IBindableEditorProps } from '../PropTypes';
-import { Data } from '@singularsystems/neo-core';
-import { DropDownBase } from './DropDownBase';
-import { FormContext } from '../FormContext';
-export interface IDropDownSpecificProps<T> {
-    items?: T[] | Promise<T[]>;
-    itemSource?: Data.IAsyncDataSource<T[]> | Data.IArrayCacheEntry<T>;
-    valueMember?: keyof T;
-    displayMember?: keyof T;
-    /**
-     * Set to true if your bind property is nullable, and you need to show a blank item in the list.
-     * If your property value is null, a blank item will automatically be shown.
-     */
-    allowNulls?: boolean;
-    /** Function used to filter items out of the datasource. */
-    filterPredicate?: (item: T) => boolean;
-    /** Callback which fires when an item is selected. */
-    onItemSelected?: (item?: T) => void;
-    /**
-     * True if the display member of the selected item should display as plain text.
-     * Use this if you need a readonly display, and don't want a form control rendered.
-     */
-    renderAsText?: boolean;
-    /** Text to display when the bound value is null, and there is no item with null as it's value member. */
-    nullText?: string;
-    /** Text to display as the first item in the drop down list when the user is allowed to select a blank item. */
-    deSelectText?: string;
-}
-export interface IDropDownProps<T> extends IBindableEditorProps<HTMLSelectElement> {
-    select: IDropDownSpecificProps<T>;
-}
-export default class DropDown<T> extends DropDownBase<T, IDropDownProps<T>> {
-    static contextType: React.Context<import("../FormContext").FormContextParams>;
-    context: React.ContextType<typeof FormContext>;
-    private selectedItem;
-    private listIndexSymbol;
-    constructor(props: IDropDownProps<T>);
-    private get items();
-    private createLookupIndex;
-    private getSelectedOption;
-    private onItemSelected;
-    render(): JSX.Element;
-}
+import * as React from 'react';
+import { IBindableEditorProps } from '../PropTypes';
+import { Data } from '@singularsystems/neo-core';
+import { DropDownBase } from './DropDownBase';
+import { FormContext } from '../FormContext';
+export interface IDropDownSpecificProps<T> {
+    items?: T[] | Promise<T[]>;
+    itemSource?: Data.IAsyncDataSource<T[]> | Data.IArrayCacheEntry<T>;
+    valueMember?: keyof T;
+    displayMember?: keyof T;
+    /**
+     * Set to true if your bind property is nullable, and you need to show a blank item in the list.
+     * If your property value is null, a blank item will automatically be shown.
+     */
+    allowNulls?: boolean;
+    /** Function used to filter items out of the datasource. */
+    filterPredicate?: (item: T) => boolean;
+    /** Callback which fires when an item is selected. */
+    onItemSelected?: (item?: T) => void;
+    /**
+     * True if the display member of the selected item should display as plain text.
+     * Use this if you need a readonly display, and don't want a form control rendered.
+     */
+    renderAsText?: boolean;
+    /** Text to display when the bound value is null, and there is no item with null as it's value member. */
+    nullText?: string;
+    /** Text to display as the first item in the drop down list when the user is allowed to select a blank item. */
+    deSelectText?: string;
+}
+export interface IDropDownProps<T> extends IBindableEditorProps<HTMLSelectElement> {
+    select: IDropDownSpecificProps<T>;
+}
+export default class DropDown<T> extends DropDownBase<T, IDropDownProps<T>> {
+    static contextType: React.Context<import("../FormContext").FormContextParams>;
+    context: React.ContextType<typeof FormContext>;
+    private selectedItem;
+    private listIndexSymbol;
+    constructor(props: IDropDownProps<T>);
+    private get items();
+    private createLookupIndex;
+    private getSelectedOption;
+    private onItemSelected;
+    render(): JSX.Element;
+}