@michalrakus/x-react-web-lib 1.22.0 → 1.23.0

package/XMultiSelect.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XMultiSelect';

package/XMultiSelect.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XMultiSelect.js');

package/XMultiSelectBase.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XMultiSelectBase';

package/XMultiSelectBase.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XMultiSelectBase.js');

package/gulpfile.js

@@ -68,6 +68,8 @@ function generateApi(cb) {
         "./lib/components/XLocale",
         "./lib/components/XLoginDialog",
         "./lib/components/XLoginForm",
+        "./lib/components/XMultiSelect",
+        "./lib/components/XMultiSelectBase",
         "./lib/components/XObject",
         "./lib/components/XSearchButton",
         "./lib/components/XToken",

package/lib/administration/XBrowseMetaBrowse.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
 import { XBrowseProps } from "../components/XLazyDataTable/XLazyDataTable";
-export declare const XBrowseMetaBrowse: (props: XBrowseProps) => JSX.Element;
+import React from "react";
+export declare const XBrowseMetaBrowse: (props: XBrowseProps) => React.JSX.Element;

package/lib/administration/XBrowseMetaForm.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { XFormBase } from "../components/XFormBase";
+import React from "react";
 export declare class XBrowseMetaForm extends XFormBase {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/administration/XParamBrowse.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from "react";
 import { XBrowseProps } from "../components/XLazyDataTable/XLazyDataTable";
 import { XCustomFilter } from "../serverApi/FindParam";
 export declare const XParamBrowse: (props: XBrowseProps & {
     customFilter?: XCustomFilter;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/administration/XParamForm.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { XFormBaseModif } from "../components/XFormBaseModif";
 import { XObject } from "../components/XObject";
 export declare class XParamForm extends XFormBaseModif {
     createNewObject(): XObject;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/administration/XUserBrowse.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
 import { XBrowseProps } from "../components/XLazyDataTable/XLazyDataTable";
-export declare const XUserBrowse: (props: XBrowseProps) => JSX.Element;
+import React from "react";
+export declare const XUserBrowse: (props: XBrowseProps) => React.JSX.Element;

package/lib/administration/XUserForm.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { XFormProps } from "../components/XFormBase";
+import React from "react";
 import { OperationType } from "../components/XUtils";
 import { XFormBaseModif } from "../components/XFormBaseModif";
 import { XObject } from "../components/XObject";
@@ -8,5 +8,5 @@ export declare class XUserForm extends XFormBaseModif {
     createNewObject(): XObject;
     preInitForm(object: XObject, operationType: OperationType.Insert | OperationType.Update): void;
     onClickSave(): Promise<void>;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/SourceCodeLinkEntity.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare const SourceCodeLinkEntity: (props: {
     sourceCodeFile: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XAutoComplete.d.ts

@@ -24,6 +24,7 @@ export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     scrollHeight?: string;
     inputClassName?: string;
     inputStyle?: React.CSSProperties;
+    setFocusOnCreate?: boolean;
 }
 export declare class XAutoComplete extends XFormComponent<XObject, XAutoCompleteProps> {
     protected xAssoc: XAssoc;
@@ -39,5 +40,5 @@ export declare class XAutoComplete extends XFormComponent<XObject, XAutoComplete
         field: string;
         xError: XError;
     } | undefined;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XAutoComplete.js

@@ -27,7 +27,7 @@ var XAutoComplete = /** @class */ (function (_super) {
     __extends(XAutoComplete, _super);
     function XAutoComplete(props) {
         var _this = _super.call(this, props) || this;
-        _this.xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOne(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.form.getEntity()), props.assocField);
+        _this.xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOneByPath(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.form.getEntity()), props.assocField);
         _this.errorInBase = undefined;
         _this.onChangeAutoCompleteBase = _this.onChangeAutoCompleteBase.bind(_this);
         _this.onErrorChangeAutoCompleteBase = _this.onErrorChangeAutoCompleteBase.bind(_this);
@@ -70,7 +70,7 @@ var XAutoComplete = /** @class */ (function (_super) {
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, itemTemplate: this.props.itemTemplate, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, width: this.props.width, scrollHeight: this.props.scrollHeight, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, inputClassName: this.props.inputClassName })));
+            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, itemTemplate: this.props.itemTemplate, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, width: this.props.width, scrollHeight: this.props.scrollHeight, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, inputClassName: this.props.inputClassName, setFocusOnCreate: this.props.setFocusOnCreate })));
     };
     return XAutoComplete;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XAutoCompleteBase.d.ts

@@ -1,19 +1,11 @@
 import React, { Component } from "react";
 import { AutoCompleteChangeEvent } from "primereact/autocomplete";
-import { OperationType } from "./XUtils";
+import { OperationType, XQuery } from "./XUtils";
 import { MenuItem } from "primereact/menuitem";
 import { XSearchBrowseParams } from "./XSearchBrowseParams";
-import { XCustomFilter } from "../serverApi/FindParam";
 import { DataTableSortMeta } from "primereact/datatable";
 export type XSuggestionsLoadProp = "eager" | "onSearchStart" | "lazy";
 export type XSuggestionsLoadType = "suggestions" | XSuggestionsLoadProp;
-export type XFilterOrFunction = XCustomFilter | (() => XCustomFilter | undefined);
-export interface XQuery {
-    entity: string;
-    filter?: XFilterOrFunction;
-    sortField?: string | DataTableSortMeta[];
-    fields?: string[];
-}
 export interface XAutoCompleteBaseProps {
     value: any;
     onChange: (object: any, objectChange: OperationType) => void;
@@ -27,6 +19,7 @@ export interface XAutoCompleteBaseProps {
     searchBrowse?: JSX.Element;
     valueForm?: JSX.Element;
     idField?: string;
+    onAddRow?: (inputValue: string) => void;
     minLength?: number;
     width?: string;
     scrollHeight?: string;
@@ -79,7 +72,8 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     formDialogOnHide(): void;
     searchDialogOnChoose(chosenRow: any): void;
     searchDialogOnHide(): void;
-    createInsertUpdateItems(splitButtonItems: MenuItem[]): void;
+    createInsertItem(splitButtonItems: MenuItem[]): void;
+    createUpdateItem(splitButtonItems: MenuItem[]): void;
     createSearchItem(splitButtonItems: MenuItem[]): void;
     createDropdownItem(splitButtonItems: MenuItem[]): void;
     onOpenDropdown(e: any): void;
@@ -92,5 +86,5 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     computeDefaultDisplayValue(suggestion: any): string;
     static isMoreSuggestions(suggestion: any): boolean;
     createSearchBrowseParams(): XSearchBrowseParams;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XAutoCompleteBase.js

@@ -487,21 +487,35 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             this.setFocusToInput();
         }
     };
-    XAutoCompleteBase.prototype.createInsertUpdateItems = function (splitButtonItems) {
+    XAutoCompleteBase.prototype.createInsertItem = function (splitButtonItems) {
         var _this = this;
         splitButtonItems.push({
             icon: 'pi pi-plus',
             command: function (e) {
-                // otvorime dialog na insert
-                _this.formDialogObjectId = undefined;
-                _this.formDialogInitValuesForInsert = {};
-                // ak mame nevalidnu hodnotu, tak ju predplnime (snaha o user friendly)
-                if (_this.state.inputChanged) {
-                    _this.formDialogInitValuesForInsert[_this.getFirstField()] = _this.state.inputValueState;
+                if (_this.props.onAddRow) {
+                    // mame custom handler pre "plus" button
+                    // ak mame nevalidnu hodnotu, tak ju odovzdame (snaha o user friendly) - TODO - ak nie sme v nevalidnom stave
+                    var inputValue = "";
+                    if (_this.state.inputChanged) {
+                        inputValue = _this.state.inputValueState;
+                    }
+                    _this.props.onAddRow(inputValue);
+                }
+                else {
+                    // otvorime dialog na insert
+                    _this.formDialogObjectId = undefined;
+                    _this.formDialogInitValuesForInsert = {};
+                    // ak mame nevalidnu hodnotu, tak ju predplnime (snaha o user friendly)
+                    if (_this.state.inputChanged) {
+                        _this.formDialogInitValuesForInsert[_this.getFirstField()] = _this.state.inputValueState;
+                    }
+                    _this.setState({ formDialogOpened: true });
                 }
-                _this.setState({ formDialogOpened: true });
             }
         });
+    };
+    XAutoCompleteBase.prototype.createUpdateItem = function (splitButtonItems) {
+        var _this = this;
         splitButtonItems.push({
             icon: 'pi pi-pencil',
             command: function (e) {
@@ -642,11 +656,14 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         var readOnly = (_a = this.props.readOnly) !== null && _a !== void 0 ? _a : false;
         var dropdownButton;
         if (!readOnly) {
-            if (this.props.searchBrowse || this.props.valueForm) {
+            if (this.props.searchBrowse || this.props.valueForm || this.props.onAddRow) {
                 // mame searchBrowse alebo CRUD operacie, potrebujeme SplitButton
                 var splitButtonItems = [];
+                if (this.props.valueForm || this.props.onAddRow) {
+                    this.createInsertItem(splitButtonItems);
+                }
                 if (this.props.valueForm) {
-                    this.createInsertUpdateItems(splitButtonItems);
+                    this.createUpdateItem(splitButtonItems);
                 }
                 if (this.props.searchBrowse && !readOnly) {
                     this.createSearchItem(splitButtonItems);
@@ -684,7 +701,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitValuesForInsert} onSaveOrCancel={this.formDialogOnSaveOrCancel}/>
         // formgroup-inline lepi SplitButton na autocomplete a zarovna jeho vysku
         return (react_1.default.createElement("div", { className: "x-auto-complete-base", style: { width: this.props.width } },
-            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, itemTemplate: this.itemTemplate, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createErrorProps(error), { inputClassName: this.props.inputClassName })),
+            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, itemTemplate: this.itemTemplate, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createTooltipOrErrorProps(error), { inputClassName: this.props.inputClassName })),
             dropdownButton,
             this.props.valueForm != undefined ?
                 react_1.default.createElement(dialog_1.Dialog, { visible: this.state.formDialogOpened, onHide: this.formDialogOnHide, header: this.formDialogObjectId ? 'Modification' : 'New row' }, react_1.default.cloneElement(this.props.valueForm, {

package/lib/components/XAutoCompleteDT.d.ts

@@ -36,5 +36,5 @@ export declare class XAutoCompleteDT extends XFormComponentDT<XAutoCompleteDTPro
         field: string;
         xError: XError;
     } | undefined;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XButton.d.ts

@@ -6,4 +6,4 @@ export declare const XButton: (props: {
     icon?: IconType<ButtonProps>;
     onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     disabled?: boolean | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XButtonIconMedium.d.ts

@@ -6,4 +6,4 @@ export declare const XButtonIconMedium: (props: {
     onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     disabled?: boolean | undefined;
     tooltip?: any;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XButtonIconNarrow.d.ts

@@ -7,4 +7,4 @@ export declare const XButtonIconNarrow: (props: {
     disabled?: boolean | undefined;
     tooltip?: any;
     addMargin?: boolean | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XButtonIconSmall.d.ts

@@ -6,4 +6,4 @@ export declare const XButtonIconSmall: (props: {
     onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     disabled?: boolean | undefined;
     tooltip?: any;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XCalendar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XDateScale } from "../serverApi/XUtilsConversions";
 export declare const XCalendar: {
     (props: {
@@ -9,7 +9,7 @@ export declare const XCalendar: {
         error?: string | undefined;
         scale: XDateScale;
         datetime?: boolean | undefined;
-    }): JSX.Element;
+    }): React.JSX.Element;
     defaultProps: {
         scale: XDateScale;
     };

package/lib/components/XCalendar.js

@@ -119,7 +119,7 @@ var XCalendar = function (props) {
     var datetime = (_a = props.datetime) !== null && _a !== void 0 ? _a : false;
     // poznamka: parseDateTime nerobi ziadny parse, nechceme aby Calendar "rusil" uzivatela pri typovani datumu
     // konverzia (a volanie props.onChange) sa robi az pri onBlur
-    return (react_1.default.createElement(calendar_1.Calendar, __assign({ id: props.id, value: getInputValue(), onChange: onChange, disabled: props.readOnly, showIcon: true, showOnFocus: false, view: getView(props.scale), dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(props.scale), keepInvalid: true, parseDateTime: function (text) { return text; }, showTime: datetime, showSeconds: datetime, inputClassName: datetime ? 'x-input-datetime' : 'x-input-date', onSelect: onSelect, onBlur: onBlur }, XUtils_1.XUtils.createErrorProps(props.error))));
+    return (react_1.default.createElement(calendar_1.Calendar, __assign({ id: props.id, value: getInputValue(), onChange: onChange, disabled: props.readOnly, showIcon: true, showOnFocus: false, view: getView(props.scale), dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(props.scale), keepInvalid: true, parseDateTime: function (text) { return text; }, showTime: datetime, showSeconds: datetime, inputClassName: datetime ? 'x-input-datetime' : 'x-input-date', onSelect: onSelect, onBlur: onBlur }, XUtils_1.XUtils.createTooltipOrErrorProps(props.error))));
 };
 exports.XCalendar = XCalendar;
 exports.XCalendar.defaultProps = {

package/lib/components/XChangePasswordForm.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { XToken } from "./XToken";
+import React from "react";
 export declare const XChangePasswordForm: (props: {
     setXToken: (xToken: XToken | null) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XCheckboxDT.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { XFormBase } from "./XFormBase";
+import React from "react";
 import { XField } from "../serverApi/XEntityMetadata";
 import { XTableFieldReadOnlyProp } from "./XFormDataTable2";
 export declare const XCheckboxDT: (props: {
@@ -8,4 +8,4 @@ export declare const XCheckboxDT: (props: {
     field: string;
     rowData: any;
     readOnly?: XTableFieldReadOnlyProp | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XDataTable.d.ts

@@ -1,10 +1,10 @@
-import { ReactChild } from "react";
+import React, { ReactChild } from "react";
 export declare const XDataTable: (props: {
     entity: string;
     dataKey: string;
     onSelect: (selectedRow: any) => void;
     children: ReactChild[];
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare const XColumn: (props: {
     field: string;
     header?: any;

package/lib/components/XDropdown.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XFilterProp, XFormComponent, XFormComponentProps } from "./XFormComponent";
 import { XAssoc } from "../serverApi/XEntityMetadata";
 import { XObject } from "./XObject";
@@ -14,5 +14,5 @@ export declare class XDropdown extends XFormComponent<XObject, XDropdownProps> {
     getField(): string;
     isNotNull(): boolean;
     getValue(): any | null;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XDropdown.js

@@ -27,7 +27,7 @@ var XDropdown = /** @class */ (function (_super) {
     __extends(XDropdown, _super);
     function XDropdown(props) {
         var _this = _super.call(this, props) || this;
-        _this.xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOne(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.form.getEntity()), props.assocField);
+        _this.xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOneByPath(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.form.getEntity()), props.assocField);
         props.form.addField(props.assocField + '.' + props.displayField);
         return _this;
     }

package/lib/components/XDropdownDT.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { XFormBase } from "./XFormBase";
+import React from "react";
 import { XDropdownOptionsMap, XTableFieldReadOnlyProp } from "./XFormDataTable2";
 import { XCustomFilter } from "../serverApi/FindParam";
 export declare const XDropdownDT: (props: {
@@ -13,4 +13,4 @@ export declare const XDropdownDT: (props: {
     onDropdownOptionsMapChange: (dropdownOptionsMap: XDropdownOptionsMap) => void;
     rowData: any;
     readOnly?: XTableFieldReadOnlyProp | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XDropdownDTFilter.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XCustomFilter } from "../serverApi/FindParam";
 export declare const XDropdownDTFilter: (props: {
     entity: string;
@@ -7,4 +7,4 @@ export declare const XDropdownDTFilter: (props: {
     onValueChange: (field: string, displayValue: any) => void;
     filter?: XCustomFilter | undefined;
     sortField?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XDropdownForEntity.d.ts

@@ -1,4 +1,4 @@
-import { Component } from "react";
+import React, { Component } from "react";
 import { DropdownChangeEvent } from "primereact/dropdown";
 import { XCustomFilter } from "../serverApi/FindParam";
 export interface XDropdownForEntityProps {
@@ -22,5 +22,5 @@ export declare class XDropdownForEntity extends Component<XDropdownForEntityProp
     componentDidMount(): void;
     loadOptions(): Promise<void>;
     onChange(e: DropdownChangeEvent): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XDropdownForEntity.js

@@ -144,7 +144,7 @@ var XDropdownForEntity = /** @class */ (function (_super) {
     XDropdownForEntity.prototype.render = function () {
         // TODO - mozno by nebolo od veci pouzivat InputText ak readOnly === true (chybala by len sipka (rozbalovac)) a dalo by sa copy-paste-ovat
         // propertiesy na Dropdown-e: readOnly vyseduje, disabled znemoznuje vyber polozky
-        return (react_1.default.createElement(dropdown_1.Dropdown, __assign({ id: this.props.id, options: this.state.options, optionLabel: this.props.displayField, dataKey: this.idField, value: this.props.value, onChange: this.onChange, readOnly: this.props.readOnly, disabled: this.props.readOnly }, XUtils_1.XUtils.createErrorProps(this.props.error))));
+        return (react_1.default.createElement(dropdown_1.Dropdown, __assign({ id: this.props.id, options: this.state.options, optionLabel: this.props.displayField, dataKey: this.idField, value: this.props.value, onChange: this.onChange, readOnly: this.props.readOnly, disabled: this.props.readOnly }, XUtils_1.XUtils.createTooltipOrErrorProps(this.props.error))));
     };
     return XDropdownForEntity;
 }(react_1.Component));

package/lib/components/XDropdownFormDTFilter.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { XFormDataTable2 } from "./XFormDataTable2";
 export declare const XDropdownFormDTFilter: (props: {
     dataTable: XFormDataTable2;
     assocField: string;
     displayField: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XEditBrowse.d.ts

@@ -1,4 +1,4 @@
-import { Component } from "react";
+import React, { Component } from "react";
 import { XEditColumnDialogValues } from "./XEditColumnDialog";
 import { XBrowseMeta } from "../serverApi/XBrowseMetadata";
 export interface XEditBrowseProps {
@@ -29,5 +29,5 @@ export declare class XEditBrowse extends Component<XEditBrowseProps> {
     moveColumn(field: string, offset: -1 | 1): void;
     getIndexForColumn(field: string): number | undefined;
     onEdit(selectedRow: any): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XEditColumnDialog.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export interface XEditColumnDialogValues {
     field: string;
     header: string;
@@ -10,4 +10,4 @@ export declare const XEditColumnDialog: (props: {
     entity: string;
     xEditColumnDialogValues?: XEditColumnDialogValues | undefined;
     onHideDialog: (xEditColumnDialogValues: XEditColumnDialogValues | null) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XEditor.d.ts

@@ -11,5 +11,5 @@ export declare class XEditor extends XInput<string, XEditorProps> {
     getValue(): string | null;
     onValueChange(value: string | null): void;
     getLabelStyle(): React.CSSProperties;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XEditorBase.d.ts

@@ -6,4 +6,4 @@ export declare const XEditorBase: (props: {
     readOnly?: boolean | undefined;
     error?: string | undefined;
     style?: React.CSSProperties | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XEditorBase.js

@@ -86,6 +86,6 @@ var XEditorBase = function (props) {
         }
         return htmlValue !== null ? htmlValue : undefined; // value v Editor nechce null, chce undefined
     };
-    return (react_1.default.createElement(editor_1.Editor, __assign({ id: props.id, value: getValue(), onTextChange: onTextChange, onBlur: onBlur, readOnly: props.readOnly, style: props.style }, XUtils_1.XUtils.createErrorProps(props.error))));
+    return (react_1.default.createElement(editor_1.Editor, __assign({ id: props.id, value: getValue(), onTextChange: onTextChange, onBlur: onBlur, readOnly: props.readOnly, style: props.style }, XUtils_1.XUtils.createTooltipOrErrorProps(props.error))));
 };
 exports.XEditorBase = XEditorBase;

package/lib/components/XFieldSelector.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 export declare const XFieldSelector: (props: {
     entity: string;
     assocSelectable: boolean;
     selectionField?: string | undefined;
     onSelectionChange: (selectedField: string) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XFormComponent.d.ts

@@ -12,6 +12,7 @@ export interface XFormComponentProps<T> {
     label?: string;
     tooltip?: string;
     placeholder?: string;
+    desc?: string;
     readOnly?: XReadOnlyProp;
     labelStyle?: React.CSSProperties;
     inline?: boolean;

package/lib/components/XFormDataTable2.d.ts

@@ -86,7 +86,7 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     removeRow(row: any): void;
     validate(): void;
     isReadOnly(): boolean;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type XTableFieldOnChange = (e: XTableFieldChangeEvent<any, any>) => void;
 export type XTableFieldReadOnlyProp = boolean | ((object: any, tableRow: any) => boolean);

package/lib/components/XFormFooter.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from "react";
 import { XFormBase } from "./XFormBase";
 export declare const xSaveButtonId: string;
 export declare const XFormFooter: (props: {
     form: XFormBase;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XFormHeader.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare const XFormHeader: (props: {
     label: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XFormNavigator3.d.ts

@@ -1,4 +1,4 @@
-import { Component } from "react";
+import React, { Component } from "react";
 export interface XFormNavigator3Props {
     rootFormElement?: JSX.Element;
 }
@@ -8,5 +8,5 @@ export declare class XFormNavigator3 extends Component<XFormNavigator3Props> {
     };
     constructor(props: XFormNavigator3Props);
     openForm(newFormElement: JSX.Element | null): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XFormRowCol/XFormCol.d.ts

@@ -6,4 +6,4 @@ export interface XFormColProps {
     style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
-export declare const XFormCol: (props: XFormColProps) => JSX.Element;
+export declare const XFormCol: (props: XFormColProps) => React.JSX.Element;

package/lib/components/XFormRowCol/XFormInlineRow.d.ts

@@ -6,4 +6,4 @@ export interface XFormInlineRowProps {
     style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
-export declare const XFormInlineRow: (props: XFormInlineRowProps) => JSX.Element;
+export declare const XFormInlineRow: (props: XFormInlineRowProps) => React.JSX.Element;

package/lib/components/XFormRowCol/XFormRow.d.ts

@@ -6,4 +6,4 @@ export interface XFormRowProps {
     style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
-export declare const XFormRow: (props: XFormRowProps) => JSX.Element;
+export declare const XFormRow: (props: XFormRowProps) => React.JSX.Element;

package/lib/components/XFormRowCol/XFormRowCol.d.ts

@@ -7,4 +7,4 @@ export interface XFormRowColProps {
     style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
-export declare const XFormRowCol: (props: XFormRowColProps) => JSX.Element;
+export declare const XFormRowCol: (props: XFormRowColProps) => React.JSX.Element;

package/lib/components/XFtsInput.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export interface XFtsInputValue {
     value: string | null;
     matchMode: 'startsWith' | 'contains' | 'endsWith' | 'equals';
@@ -6,4 +6,4 @@ export interface XFtsInputValue {
 export declare const XFtsInput: (props: {
     value: XFtsInputValue;
     onChange: (value: XFtsInputValue) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XHolders.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 export declare const XHolder1: (props: {
     element: any;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare const XHolder2: (props: {
     element: any;
-}) => JSX.Element;
+}) => React.JSX.Element;