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

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

@@ -2,8 +2,9 @@ import React from "react";
 import { XFormBase } from "../XFormBase";
 export interface XFormColProps {
     form?: XFormBase;
+    width?: string | "full";
     labelStyle?: React.CSSProperties;
     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/XFormCol.js

@@ -7,6 +7,6 @@ exports.XFormCol = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormRowCol_1 = require("./XFormRowCol");
 var XFormCol = function (props) {
-    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-col", form: props.form, labelStyle: props.labelStyle, style: props.style, children: props.children });
+    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-col", form: props.form, width: props.width, labelStyle: props.labelStyle, style: props.style, children: props.children });
 };
 exports.XFormCol = XFormCol;

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

@@ -3,8 +3,9 @@ import { XFormBase } from "../XFormBase";
 export interface XFormRowColProps {
     className: "x-form-row" | "x-form-inline-row" | "x-form-col";
     form?: XFormBase;
+    width?: string | "full";
     labelStyle?: React.CSSProperties;
     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/XFormRowCol/XFormRowCol.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormRowCol = void 0;
 var react_1 = __importDefault(require("react"));
+var XUtils_1 = require("../XUtils");
 var XFormRowCol = function (props) {
     var childElemList;
     if (props.form || props.labelStyle) {
@@ -27,6 +28,12 @@ var XFormRowCol = function (props) {
     else {
         childElemList = props.children; // netreba klonovat - viac menej koli performance
     }
-    return react_1.default.createElement("div", { className: props.className, style: props.style }, childElemList);
+    var style = props.style;
+    if (props.width) {
+        style = style !== null && style !== void 0 ? style : {};
+        var width = (props.width === 'full' ? '100%' : props.width);
+        XUtils_1.XUtils.addCssPropIfNotExists(style, { width: width }); // props.style ma vyssiu prioritu ako props.width
+    }
+    return react_1.default.createElement("div", { className: props.className, style: style }, childElemList);
 };
 exports.XFormRowCol = XFormRowCol;

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;

package/lib/components/XInputDate.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XFormComponentProps } from "./XFormComponent";
 import { XInput } from "./XInput";
 export interface XInputDateProps extends XFormComponentProps<number> {
@@ -8,5 +8,5 @@ export declare class XInputDate extends XInput<Date, XInputDateProps> {
     constructor(props: XInputDateProps);
     getValue(): Date | null;
     onValueChange(value: Date | null): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputDateDT.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XInputDT, XInputDTProps } from "./XInputDT";
 export interface XInputDateDTProps extends XInputDTProps {
 }
@@ -6,5 +6,5 @@ export declare class XInputDateDT extends XInputDT<XInputDateDTProps> {
     constructor(props: XInputDateDTProps);
     getValue(): Date | null;
     onValueChange(value: Date | null): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputDecimal.d.ts

@@ -11,5 +11,5 @@ export declare class XInputDecimal extends XInput<number, XInputDecimalProps> {
     getValue(): number | undefined;
     onValueChange(e: any): void;
     onBlur(e: any): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputDecimalBase.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare const XInputDecimalBase: (props: {
     id?: string | undefined;
     value: number | null;
@@ -10,4 +10,4 @@ export declare const XInputDecimalBase: (props: {
     max?: number | undefined;
     size?: number | undefined;
     className?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XInputDecimalDT.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XInputDT, XInputDTProps } from "./XInputDT";
 export interface XInputDecimalDTProps extends XInputDTProps {
 }
@@ -7,5 +7,5 @@ export declare class XInputDecimalDT extends XInputDT<XInputDecimalDTProps> {
     getValue(): number | undefined;
     onValueChange(e: any): void;
     onBlur(e: any): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputDecimalDT.js

@@ -67,7 +67,7 @@ var XInputDecimalDT = /** @class */ (function (_super) {
     };
     XInputDecimalDT.prototype.render = function () {
         var _a = XUtilsMetadata_1.XUtilsMetadata.getParamsForInputNumber(this.xField), useGrouping = _a.useGrouping, fractionDigits = _a.fractionDigits, min = _a.min, max = _a.max;
-        return (react_1.default.createElement(inputnumber_1.InputNumber, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, onBlur: this.onBlur }, XUtils_1.XUtils.addClassName(XUtils_1.XUtils.createErrorProps(this.getError()), "x-input-to-resize"))));
+        return (react_1.default.createElement(inputnumber_1.InputNumber, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, onBlur: this.onBlur }, XUtils_1.XUtils.addClassName(XUtils_1.XUtils.createTooltipOrErrorProps(this.getError()), "x-input-to-resize"))));
     };
     return XInputDecimalDT;
 }(XInputDT_1.XInputDT));

package/lib/components/XInputFileList.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { Component } from "react";
 import { FileUploadHandlerEvent } from "primereact/fileupload";
 import { XFormBase } from "./XFormBase";
@@ -31,6 +32,6 @@ export declare class XInputFileList extends Component<XInputFileListProps> {
     static sizeInMB(size: number): string;
     onDownloadFile(xFile: XFile): Promise<void>;
     onRemoveFile(fileItem: any): Promise<void>;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/components/XInputInterval.d.ts

@@ -10,5 +10,5 @@ export declare class XInputInterval extends XInput<number, XInputIntervalProps>
     constructor(props: XInputIntervalProps);
     getValue(): IPostgresInterval | null;
     onValueChange(value: IPostgresInterval | null): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputIntervalBase.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import React, { CSSProperties } from "react";
 import { IPostgresInterval } from "./XUtils";
 export declare const XInputIntervalBase: (props: {
     id?: string | undefined;
@@ -7,4 +7,4 @@ export declare const XInputIntervalBase: (props: {
     readOnly?: boolean | undefined;
     error?: string | undefined;
     style?: CSSProperties | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XInputIntervalBase.js

@@ -92,6 +92,6 @@ var XInputIntervalBase = function (props) {
         return inputValue;
     };
     // remark - width:'3.5rem' is default, can be overriden by value from props.style, if needed
-    return (react_1.default.createElement(inputtext_1.InputText, __assign({ id: props.id, value: getInputValue(), onChange: onChange, onBlur: onBlur, readOnly: props.readOnly }, XUtils_1.XUtils.createErrorProps(props.error), { style: __assign({ width: '3.5rem' }, props.style) })));
+    return (react_1.default.createElement(inputtext_1.InputText, __assign({ id: props.id, value: getInputValue(), onChange: onChange, onBlur: onBlur, readOnly: props.readOnly }, XUtils_1.XUtils.createTooltipOrErrorProps(props.error), { style: __assign({ width: '3.5rem' }, props.style) })));
 };
 exports.XInputIntervalBase = XInputIntervalBase;

package/lib/components/XInputIntervalDT.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IPostgresInterval } from "./XUtils";
 import { XInputDT, XInputDTProps } from "./XInputDT";
 export interface XInputIntervalDTProps extends XInputDTProps {
@@ -7,5 +7,5 @@ export declare class XInputIntervalDT extends XInputDT<XInputIntervalDTProps> {
     constructor(props: XInputIntervalDTProps);
     getValue(): IPostgresInterval | null;
     onValueChange(value: IPostgresInterval | null): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputText.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XInput, XInputProps } from "./XInput";
 export interface XInputTextProps extends XInputProps<string> {
     size?: number;
@@ -8,5 +8,5 @@ export declare class XInputText extends XInput<string, XInputTextProps> {
     getValue(): string;
     onValueChange(e: any): void;
     onBlur(e: any): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputText.js

@@ -34,6 +34,8 @@ var react_1 = __importDefault(require("react"));
 var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
 var inputtext_1 = require("primereact/inputtext");
 var XInput_1 = require("./XInput");
+var XUtils_1 = require("./XUtils");
+var tooltip_1 = require("primereact/tooltip");
 var XInputText = /** @class */ (function (_super) {
     __extends(XInputText, _super);
     function XInputText(props) {
@@ -57,13 +59,22 @@ var XInputText = /** @class */ (function (_super) {
         this.callOnChangeFromOnBlur();
     };
     XInputText.prototype.render = function () {
-        var _a;
+        var _a, _b;
+        var value = this.getValue();
+        var labelTooltip = undefined;
+        var labelElemId = undefined;
+        if (value) {
+            // nevidno placeholder, tak zobrazime desc ako label tooltip
+            labelTooltip = this.props.desc;
+            labelElemId = "".concat(this.props.field, "_label_id");
+        }
         var size = (_a = this.props.size) !== null && _a !== void 0 ? _a : this.xField.length;
         // note: style overrides size (width of the input according to character count)
         var label = this.getLabel();
         return (react_1.default.createElement("div", { className: "field grid" },
-            label !== undefined ? react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
-            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur, placeholder: this.props.placeholder }))));
+            label !== undefined ? react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
+            labelTooltip ? react_1.default.createElement(tooltip_1.Tooltip, { target: "#".concat(labelElemId), content: labelTooltip }) : null,
+            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: value, onChange: this.onValueChange, onBlur: this.onBlur, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, XUtils_1.XUtils.createTooltipOrErrorProps(this.getError(), this.props.tooltip), { placeholder: (_b = this.props.placeholder) !== null && _b !== void 0 ? _b : this.props.desc }))));
     };
     return XInputText;
 }(XInput_1.XInput));

package/lib/components/XInputTextDT.d.ts

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

package/lib/components/XInputTextarea.d.ts

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

package/lib/components/XInputTextarea.js

@@ -23,6 +23,7 @@ var react_1 = __importDefault(require("react"));
 var XInput_1 = require("./XInput");
 var XUtils_1 = require("./XUtils");
 var XInputTextareaBase_1 = require("./XInputTextareaBase");
+var tooltip_1 = require("primereact/tooltip");
 var XInputTextarea = /** @class */ (function (_super) {
     __extends(XInputTextarea, _super);
     function XInputTextarea(props) {
@@ -41,14 +42,29 @@ var XInputTextarea = /** @class */ (function (_super) {
         return this.props.labelOnTop ? ((_a = this.props.labelStyle) !== null && _a !== void 0 ? _a : {}) : _super.prototype.getLabelStyle.call(this);
     };
     XInputTextarea.prototype.render = function () {
-        var _a;
+        var _a, _b;
+        var fieldStyle = undefined;
+        var labelStyle = this.getLabelStyle();
         var inputStyle = (_a = this.props.inputStyle) !== null && _a !== void 0 ? _a : {};
         var cols;
         if (this.props.cols === "full") {
             cols = undefined;
             // pridame width:100%
-            // ak nemame labelOnTop=true, musime odratat sirku labelu, inac sa label dostane nad input (koli flex-wrap: wrap)
-            var widthValue = this.props.labelOnTop ? '100%' : "calc(100% - ".concat(XUtils_1.XUtils.FIELD_LABEL_WIDTH, ")");
+            //fieldStyle = {width: '100%'};
+            var widthValue = void 0;
+            if (this.props.labelOnTop) {
+                widthValue = '100%';
+            }
+            else {
+                // ak nemame labelOnTop=true, musime odratat sirku labelu, inac sa label dostane nad input (koli flex-wrap: wrap)
+                var labelStyleWidth = labelStyle.width;
+                if (labelStyleWidth) {
+                    widthValue = "calc(100% - ".concat(labelStyleWidth, ")");
+                }
+                else {
+                    widthValue = '100%';
+                }
+            }
             XUtils_1.XUtils.addCssPropIfNotExists(inputStyle, { width: widthValue });
         }
         else {
@@ -57,11 +73,20 @@ var XInputTextarea = /** @class */ (function (_super) {
             // aj tak sa asi vzdy bude pouzivat "full"
             cols = this.props.cols;
         }
+        var value = this.getValue();
+        var labelTooltip = undefined;
+        var labelElemId = undefined;
+        if (value !== null) {
+            // nevidno placeholder, tak zobrazime desc ako label tooltip
+            labelTooltip = this.props.desc;
+            labelElemId = "".concat(this.props.field, "_label_id");
+        }
         // InputTextarea renderujeme az ked mame nacitany object, lebo inac pri autoResize sa nam nenastavi spravna velkost (hodnota nie je k dispozicii pri prvom renderingu)
-        return (react_1.default.createElement("div", { className: !this.props.labelOnTop ? 'field grid' : 'field grid x-inputtextarea-label-on-top' },
-            react_1.default.createElement("label", { htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: this.getLabelStyle() }, this.getLabel()),
+        return (react_1.default.createElement("div", { className: !this.props.labelOnTop ? 'field grid' : 'field grid x-inputtextarea-label-on-top', style: fieldStyle },
+            react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: labelStyle }, this.getLabel()),
+            labelTooltip ? react_1.default.createElement(tooltip_1.Tooltip, { target: "#".concat(labelElemId), content: labelTooltip }) : null,
             this.props.form.state.object ?
-                react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, rows: this.props.rows, cols: cols, autoResize: this.props.autoResize, error: this.getError() })
+                react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { id: this.props.field, value: value, onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, rows: this.props.rows, cols: cols, autoResize: this.props.autoResize, error: this.getError(), tooltip: this.props.tooltip, placeholder: (_b = this.props.placeholder) !== null && _b !== void 0 ? _b : this.props.desc })
                 : null));
     };
     XInputTextarea.defaultProps = {

package/lib/components/XInputTextareaBase.d.ts

@@ -10,4 +10,6 @@ export declare const XInputTextareaBase: (props: {
     error?: string | undefined;
     style?: React.CSSProperties | undefined;
     maxLength?: number | undefined;
-}) => JSX.Element;
+    tooltip?: string | undefined;
+    placeholder?: string | undefined;
+}) => React.JSX.Element;

package/lib/components/XInputTextareaBase.js

@@ -86,6 +86,6 @@ var XInputTextareaBase = function (props) {
         }
         return inputValue;
     };
-    return (react_1.default.createElement(inputtextarea_1.InputTextarea, __assign({ id: props.id, value: getInputValue(), onChange: onChange, onBlur: onBlur, readOnly: props.readOnly, maxLength: props.maxLength, style: props.style, rows: props.rows, cols: props.cols, autoResize: props.autoResize }, XUtils_1.XUtils.createErrorProps(props.error))));
+    return (react_1.default.createElement(inputtextarea_1.InputTextarea, __assign({ id: props.id, value: getInputValue(), onChange: onChange, onBlur: onBlur, readOnly: props.readOnly, maxLength: props.maxLength, style: props.style, rows: props.rows, cols: props.cols, autoResize: props.autoResize }, XUtils_1.XUtils.createTooltipOrErrorProps(props.error, props.tooltip), { placeholder: props.placeholder })));
 };
 exports.XInputTextareaBase = XInputTextareaBase;

package/lib/components/XInputTextareaDT.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XInputDT, XInputDTProps } from "./XInputDT";
 export interface XInputTextareaDTProps extends XInputDTProps {
     rows: number;
@@ -8,5 +8,5 @@ export declare class XInputTextareaDT extends XInputDT<XInputTextareaDTProps> {
     constructor(props: XInputTextareaDTProps);
     getValue(): string | null;
     onValueChange(value: string | null): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XLazyDataTable/XExportRowsDialog.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ExportType, LazyDataTableQueryParam } from "../../serverApi/ExportImportParam";
+import React from "react";
 export interface XExportParams {
     rowCount: number;
     existsToManyAssoc: boolean;
@@ -17,4 +17,4 @@ export declare const XExportRowsDialog: (props: {
     dialogState: XExportRowsDialogState;
     hideDialog: () => void;
     exportTypeOptions?: ExportType[];
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XLazyDataTable/XExportRowsDialog.js

@@ -185,20 +185,20 @@ var XExportRowsDialog = function (props) {
             if ((_a = props.dialogState.exportParams) === null || _a === void 0 ? void 0 : _a.existsToManyAssoc) {
                 elem.push(react_1.default.createElement("div", { key: "expDetailRowsExport", className: "field grid" },
                     react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expDetailRowsExport')),
-                    react_1.default.createElement(dropdown_1.Dropdown, { value: detailRowsExport, options: XUtils_1.XUtils.multilineExportTypeOptions, onChange: function (e) { return setDetailRowsExport(e.value); } })));
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: detailRowsExport, options: XUtils_1.XUtils.options(XUtils_1.XUtils.multilineExportTypeOptions), onChange: function (e) { return setDetailRowsExport(e.value); } })));
             }
         }
         if (exportType === ExportImportParam_1.ExportType.Csv) {
             elem.push([
                 react_1.default.createElement("div", { key: "expCsvSeparator", className: "field grid" },
                     react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expCsvSeparator')),
-                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvSeparator, options: XUtils_1.XUtils.csvSeparatorOptions, onChange: function (e) { return setCsvSeparator(e.value); } })),
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvSeparator, options: XUtils_1.XUtils.options(XUtils_1.XUtils.csvSeparatorOptions), onChange: function (e) { return setCsvSeparator(e.value); } })),
                 react_1.default.createElement("div", { key: "expDecimalFormat", className: "field grid" },
                     react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expDecimalFormat')),
-                    react_1.default.createElement(dropdown_1.Dropdown, { value: decimalFormat, options: XUtils_1.XUtils.decimalFormatOptions, onChange: function (e) { return setDecimalFormat(e.value); } })),
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: decimalFormat, options: XUtils_1.XUtils.options(XUtils_1.XUtils.decimalFormatOptions), onChange: function (e) { return setDecimalFormat(e.value); } })),
                 react_1.default.createElement("div", { key: "expEncoding", className: "field grid" },
                     react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expEncoding')),
-                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvEncoding, options: XUtils_1.XUtils.csvEncodingOptions, onChange: function (e) { return setCsvEncoding(e.value); } }))
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvEncoding, options: XUtils_1.XUtils.options(XUtils_1.XUtils.csvEncodingOptions), onChange: function (e) { return setCsvEncoding(e.value); } }))
             ]);
         }
     }
@@ -211,7 +211,7 @@ var XExportRowsDialog = function (props) {
             : null,
         react_1.default.createElement("div", { key: "expExportType", className: "field grid" },
             react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expExportType')),
-            react_1.default.createElement(dropdown_1.Dropdown, { value: exportType, options: (_e = props.exportTypeOptions) !== null && _e !== void 0 ? _e : XUtils_1.XUtils.exportTypeOptions, onChange: function (e) { return setExportType(e.value); } })),
+            react_1.default.createElement(dropdown_1.Dropdown, { value: exportType, options: XUtils_1.XUtils.options((_e = props.exportTypeOptions) !== null && _e !== void 0 ? _e : XUtils_1.XUtils.exportTypeOptions), onChange: function (e) { return setExportType(e.value); } })),
         elem,
         react_1.default.createElement("div", { key: "exportRows", className: "flex justify-content-center" },
             react_1.default.createElement(XButton_1.XButton, { label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onExport }))));

package/lib/components/XLazyDataTable/XLazyDataTable.d.ts

@@ -75,7 +75,7 @@ export interface XLazyDataTableProps {
     children: ReactChild[];
 }
 export declare const XLazyDataTable: {
-    (props: XLazyDataTableProps): JSX.Element;
+    (props: XLazyDataTableProps): React.JSX.Element;
     defaultProps: {
         paginator: boolean;
         rows: number;

package/lib/components/XLazyDataTable/XMultilineSwitch.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { XMultilineRenderType } from "./XLazyDataTable";
 export declare const XMultilineSwitch: (props: {
     value: XMultilineRenderType;
     onChange: (value: XMultilineRenderType) => void;
     className?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XLazyDataTable/XOcfDropdown.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 import { XOptionalCustomFilter } from "./XLazyDataTable";
 export declare const XOcfDropdown: (props: {
     optionalCustomFilters: XOptionalCustomFilter[];
     value: XOptionalCustomFilter | undefined;
     onChange: (value: XOptionalCustomFilter | undefined) => void;
     className?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XLoginDialog.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { XToken } from "./XToken";
 export declare const XLoginDialog: (props: {
     dialogOpened: boolean;
     setXToken: (xToken: XToken | null) => void;
     onHideDialog: (ok: boolean) => void;
     customUserService?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XLoginForm.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { XToken } from "./XToken";
+import React from "react";
 export declare const XLoginForm: (props: {
     setXToken: (xToken: XToken | null) => void;
     onLogin?: (() => void) | undefined;
     customUserService?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XMultiSelect.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { XFilterProp, XFormComponent, XFormComponentProps } from "./XFormComponent";
+import { XAssoc } from "../serverApi/XEntityMetadata";
+import { XObject } from "./XObject";
+import { DataTableSortMeta } from "primereact/datatable";
+export interface XMultiSelectProps extends XFormComponentProps<XObject> {
+    assocToMany: string;
+    assocManyToOne?: string;
+    displayField: string;
+    filter?: XFilterProp;
+    sortField?: string | DataTableSortMeta[];
+    fields?: string[];
+    width?: string;
+    scrollHeight?: string;
+}
+export declare class XMultiSelect extends XFormComponent<XObject, XMultiSelectProps> {
+    protected xAssocToMany: XAssoc;
+    protected xAssocManyToOne?: XAssoc;
+    constructor(props: XMultiSelectProps);
+    getField(): string;
+    isNotNull(): boolean;
+    getValue(): any[];
+    onChange(value: any[]): void;
+    render(): React.JSX.Element;
+}

package/lib/components/XMultiSelect.js

@@ -0,0 +1,97 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XMultiSelect = void 0;
+var react_1 = __importDefault(require("react"));
+var XFormComponent_1 = require("./XFormComponent");
+var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
+var XMultiSelectBase_1 = require("./XMultiSelectBase");
+var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
+var XMultiSelect = /** @class */ (function (_super) {
+    __extends(XMultiSelect, _super);
+    function XMultiSelect(props) {
+        var _this = _super.call(this, props) || this;
+        _this.xAssocToMany = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToManyByPath(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.form.getEntity()), props.assocToMany);
+        if (props.assocManyToOne) {
+            _this.xAssocManyToOne = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOneByPath(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(_this.xAssocToMany.entityName), props.assocManyToOne);
+        }
+        if (props.assocManyToOne) {
+            props.form.addField(props.assocToMany + '.' + props.assocManyToOne + '.' + props.displayField);
+        }
+        else {
+            props.form.addField(props.assocToMany + '.' + props.displayField);
+        }
+        _this.onChange = _this.onChange.bind(_this);
+        return _this;
+    }
+    XMultiSelect.prototype.getField = function () {
+        return this.props.assocToMany;
+    };
+    XMultiSelect.prototype.isNotNull = function () {
+        return !this.xAssocToMany.isNullable;
+    };
+    XMultiSelect.prototype.getValue = function () {
+        var _this = this;
+        var optionRowList;
+        var rowList = this.getValueFromObject();
+        if (this.props.assocManyToOne) {
+            // assoc "assocToMany" contains link rows - these link rows have to be transformed to option rows
+            if (rowList !== null) {
+                optionRowList = rowList.map(function (linkRow) { return XUtilsCommon_1.XUtilsCommon.getValueByPath(linkRow, _this.props.assocManyToOne); });
+            }
+            else {
+                // this.props.form.state.object was not initialised yet
+                optionRowList = [];
+            }
+        }
+        else {
+            // assoc "assocToMany" contains option rows - no transformation needed
+            optionRowList = rowList !== null && rowList !== void 0 ? rowList : [];
+        }
+        return optionRowList;
+    };
+    XMultiSelect.prototype.onChange = function (value) {
+        var _this = this;
+        // value coming from XMultiSelectBase is list of selected option rows
+        var rowList;
+        if (this.props.assocManyToOne) {
+            // assoc "assocToMany" expects link rows - we wrap options row into link rows, id is left undefined,
+            // during save will be all old links deleted and these new links will be inserted (because id is undefined)
+            rowList = value.map(function (optionRow) {
+                var linkRow = {};
+                linkRow[_this.props.assocManyToOne] = optionRow;
+                return linkRow;
+            });
+        }
+        else {
+            // assoc "assocToMany" expects option rows - no transformation needed
+            rowList = value;
+        }
+        this.onValueChangeBase(rowList, this.props.onChange);
+    };
+    XMultiSelect.prototype.render = function () {
+        var _this = this;
+        return (react_1.default.createElement("div", { className: "field grid" },
+            react_1.default.createElement("label", { htmlFor: this.props.assocToMany, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
+            react_1.default.createElement(XMultiSelectBase_1.XMultiSelectBase, { value: this.getValue(), onChange: this.onChange, displayField: this.props.displayField, optionsQuery: { entity: this.xAssocManyToOne ? this.xAssocManyToOne.entityName : this.xAssocToMany.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, width: this.props.width, scrollHeight: this.props.scrollHeight, readOnly: this.isReadOnly(), error: this.getError() })));
+    };
+    return XMultiSelect;
+}(XFormComponent_1.XFormComponent));
+exports.XMultiSelect = XMultiSelect;