@michalrakus/x-react-web-lib 1.35.0 → 1.35.2

package/lib/components/XAutoCompleteBase.d.ts

@@ -5,6 +5,7 @@ import { MenuItemCommandEvent } from "primereact/menuitem";
 import { XSearchBrowseParams } from "./XSearchBrowseParams";
 import { DataTableSortMeta } from "primereact/datatable";
 import { XEntity } from "../serverApi/XEntityMetadata";
+import { XFormDialogState } from "./XFormDialog";
 interface XButtonItem {
     icon: any | undefined;
     tooltip?: string;
@@ -62,14 +63,12 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
         notValid: boolean;
         suggestions: any[] | undefined;
         filteredSuggestions: any[] | undefined;
-        formDialogOpened: boolean;
+        formDialogState: XFormDialogState;
         searchDialogOpened: boolean;
     };
     suggestionsLoadedForOSS: boolean;
     wasOnChangeCalled: boolean;
     xEntity: XEntity | undefined;
-    formDialogObjectId: number | undefined;
-    formDialogInitValuesForInsert: any | undefined;
     constructor(props: XAutoCompleteBaseProps);
     getXSuggestionsLoadType(): XSuggestionsLoadType;
     getFields(): string[];
@@ -89,7 +88,6 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     removeFocusFromInput(): void;
     setObjectValue(object: any, objectChange: OperationType): void;
     formDialogOnSaveOrCancel(object: any | null, objectChange: OperationType): void;
-    formDialogOnHide(): void;
     searchDialogOnChoose(chosenRow: any): void;
     searchDialogOnHide(): void;
     createInsertItem(buttonItems: XButtonItem[]): void;

package/lib/components/XAutoCompleteBase.js

@@ -130,6 +130,7 @@ var XUtils_1 = require("./XUtils");
 var button_1 = require("primereact/button");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
+var XFormDialog_1 = require("./XFormDialog");
 var XAutoCompleteBase = /** @class */ (function (_super) {
     __extends(XAutoCompleteBase, _super);
     function XAutoCompleteBase(props) {
@@ -142,7 +143,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             notValid: false,
             suggestions: undefined,
             filteredSuggestions: undefined,
-            formDialogOpened: false,
+            formDialogState: { opened: false },
             searchDialogOpened: false
         };
         _this.suggestionsLoadedForOSS = false;
@@ -169,7 +170,6 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         _this.itemTemplateString = _this.itemTemplateString.bind(_this);
         _this.computeDefaultDisplayValue = _this.computeDefaultDisplayValue.bind(_this);
         _this.formDialogOnSaveOrCancel = _this.formDialogOnSaveOrCancel.bind(_this);
-        _this.formDialogOnHide = _this.formDialogOnHide.bind(_this);
         _this.searchDialogOnChoose = _this.searchDialogOnChoose.bind(_this);
         _this.searchDialogOnHide = _this.searchDialogOnHide.bind(_this);
         return _this;
@@ -494,14 +494,8 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                 this.setFocusToInput();
             }
         }
-        this.setState({ formDialogOpened: false });
-    };
-    XAutoCompleteBase.prototype.formDialogOnHide = function () {
-        this.setState({ formDialogOpened: false });
-        // ak mame v inpute neplatnu hodnotu, vratime kurzor na input
-        if (this.state.inputChanged) {
-            this.setFocusToInput();
-        }
+        var formDialogState = { opened: false };
+        this.setState({ formDialogState: formDialogState });
     };
     XAutoCompleteBase.prototype.searchDialogOnChoose = function (chosenRow) {
         this.setState({ searchDialogOpened: false });
@@ -532,13 +526,18 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                 }
                 else {
                     // otvorime dialog na insert
-                    _this.formDialogObjectId = undefined;
-                    _this.formDialogInitValuesForInsert = {};
+                    var initValues = {};
                     // ak mame nevalidnu hodnotu, tak ju predplnime (snaha o user friendly)
                     if (_this.state.inputChanged) {
-                        _this.formDialogInitValuesForInsert[_this.getFirstField()] = _this.state.inputValueState;
+                        initValues[_this.getFirstField()] = _this.state.inputValueState;
                     }
-                    _this.setState({ formDialogOpened: true });
+                    var formDialogState = {
+                        opened: true,
+                        id: undefined,
+                        initValues: initValues,
+                        onSaveOrCancel: _this.formDialogOnSaveOrCancel
+                    };
+                    _this.setState({ formDialogState: formDialogState });
                 }
             }
         });
@@ -614,9 +613,13 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         if (this.props.idField === undefined) {
             throw "XAutoCompleteBase: property valueForm is defined but property idField is also needed for form editation.";
         }
-        this.formDialogObjectId = this.props.value[this.props.idField];
-        this.formDialogInitValuesForInsert = undefined;
-        this.setState({ formDialogOpened: true });
+        var formDialogState = {
+            opened: true,
+            id: this.props.value[this.props.idField],
+            initValues: undefined,
+            onSaveOrCancel: this.formDialogOnSaveOrCancel
+        };
+        this.setState({ formDialogState: formDialogState });
     };
     // vracia objekt (ak inputChanged === false) alebo string (ak inputChanged === true)
     XAutoCompleteBase.prototype.computeInputValue = function () {
@@ -740,13 +743,9 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         else {
             error = this.props.error;
         }
-        // Dialog pre konkretny form:
-        // <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.apply(react_1.default, __spreadArray(__spreadArray(["div", { className: "x-auto-complete-base", style: { width: this.props.width, maxWidth: this.props.maxWidth } }, 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, inputRef: this.autoCompleteInputRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createTooltipOrErrorProps(error), { inputClassName: this.props.inputClassName, showEmptyMessage: true }))], __read(buttons), false), [this.props.valueForm != undefined ?
-                react_1.default.createElement(dialog_1.Dialog, { key: "dialog-form", className: "x-dialog-without-header", visible: this.state.formDialogOpened, onHide: this.formDialogOnHide }, react_1.default.cloneElement(this.props.valueForm, {
-                    id: this.formDialogObjectId, initValues: this.formDialogInitValuesForInsert, onSaveOrCancel: this.formDialogOnSaveOrCancel
-                } /*, this.props.valueForm.children*/))
+                react_1.default.createElement(XFormDialog_1.XFormDialog, { key: "dialog-form", dialogState: this.state.formDialogState, form: this.props.valueForm })
                 : undefined, this.props.searchBrowse != undefined && !readOnly ?
                 react_1.default.createElement(dialog_1.Dialog, { key: "dialog-browse", className: "x-dialog-without-header", visible: this.state.searchDialogOpened, onHide: this.searchDialogOnHide }, react_1.default.cloneElement(this.props.searchBrowse, { searchBrowseParams: this.createSearchBrowseParams() } /*, props.searchBrowse.children*/))
                 : undefined], false)));

package/lib/components/XFormBase.d.ts

@@ -61,6 +61,7 @@ export declare abstract class XFormBase extends Component<XFormProps> {
     formReadOnlyBase(field: string): boolean;
     onClickSave(): Promise<void>;
     onClickCancel(): void;
+    openFormNull(): void;
     validateSave(): Promise<boolean>;
     validateForm(): Promise<XErrorMap>;
     fieldValidation(): XErrorMap;

package/lib/components/XFormBase.js

@@ -449,7 +449,7 @@ var XFormBase = /** @class */ (function (_super) {
                             this.props.onSaveOrCancel(object, isAddRow ? XUtils_1.OperationType.Insert : XUtils_1.OperationType.Update);
                         }
                         else {
-                            this.props.openForm(null); // standardny rezim; save zbehol, ideme naspet do browsu
+                            this.openFormNull();
                         }
                         return [2 /*return*/];
                 }
@@ -461,11 +461,21 @@ var XFormBase = /** @class */ (function (_super) {
             this.props.onSaveOrCancel(null, XUtils_1.OperationType.None); // formular je zobrazeny v dialogu
         }
         else {
-            // standardny rezim
-            // openForm pridavame automaticky v XFormNavigator2 pri renderovani komponentu
-            // null - vrati sa do predchadzajuceho formularu, z ktoreho bol otvoreny
+            this.openFormNull();
+        }
+    };
+    XFormBase.prototype.openFormNull = function () {
+        // deprecated functionality used when XFormNavigator (deprecated) used
+        // standardny rezim
+        // openForm pridavame automaticky v XFormNavigator pri renderovani komponentu
+        // null - vrati sa do predchadzajuceho formularu, z ktoreho bol otvoreny
+        if (typeof this.props.openForm === 'function') {
             this.props.openForm(null);
         }
+        else {
+            // warning
+            console.log("Form has no onSaveOrCancel method declared.");
+        }
     };
     XFormBase.prototype.validateSave = function () {
         return __awaiter(this, void 0, void 0, function () {

package/lib/components/XFormDialog.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { XOnSaveOrCancelProp } from "./XFormBase";
+export interface XFormDialogState {
+    opened: boolean;
+    id?: number;
+    initValues?: object;
+    onSaveOrCancel?: XOnSaveOrCancelProp;
+    form?: JSX.Element;
+}
+export declare const XFormDialog: (props: {
+    dialogState: XFormDialogState;
+    form?: JSX.Element | undefined;
+}) => React.JSX.Element;

package/lib/components/XFormDialog.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFormDialog = void 0;
+var react_1 = __importDefault(require("react"));
+var dialog_1 = require("primereact/dialog");
+var XUtils_1 = require("./XUtils");
+var XFormDialog = function (props) {
+    var _a;
+    var onHide = function () {
+        if (props.dialogState.onSaveOrCancel) {
+            props.dialogState.onSaveOrCancel(null, XUtils_1.OperationType.None);
+        }
+    };
+    var form = (_a = props.dialogState.form) !== null && _a !== void 0 ? _a : props.form;
+    return (react_1.default.createElement(dialog_1.Dialog, { key: "dialog-form", className: "x-dialog-without-header", visible: props.dialogState.opened, onHide: onHide }, form ? react_1.default.cloneElement(form, {
+        id: props.dialogState.id, initValues: props.dialogState.initValues, onSaveOrCancel: props.dialogState.onSaveOrCancel
+    } /*, props.form.children*/) : null));
+};
+exports.XFormDialog = XFormDialog;

package/lib/components/XFormNavigator3.d.ts

@@ -2,6 +2,9 @@ import React, { Component } from "react";
 export interface XFormNavigator3Props {
     rootFormElement?: JSX.Element;
 }
+/**
+ * @deprecated use opening form in dialogs instead
+ */
 export declare class XFormNavigator3 extends Component<XFormNavigator3Props> {
     state: {
         formElements: JSX.Element[];

package/lib/components/XFormNavigator3.js

@@ -65,6 +65,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormNavigator3 = void 0;
 var react_1 = __importStar(require("react"));
+/**
+ * @deprecated use opening form in dialogs instead
+ */
 var XFormNavigator3 = /** @class */ (function (_super) {
     __extends(XFormNavigator3, _super);
     function XFormNavigator3(props) {

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

@@ -10,6 +10,8 @@ import { ButtonProps } from "primereact/button";
 import { XtDocTemplate } from "../../modules/docTemplates/xt-doc-template";
 export type XBetweenFilterProp = "row" | "column" | undefined;
 export type XMultilineRenderType = "singleLine" | "fewLines" | "allLines";
+export type XOpenFormForInsert = (initValues?: object, onSaveOrCancel?: XOnSaveOrCancelProp, form?: JSX.Element) => void;
+export type XOpenFormForUpdate = (id: number, onSaveOrCancel?: XOnSaveOrCancelProp, form?: JSX.Element) => void;
 export interface XAppButtonForRow {
     key?: string;
     icon?: IconType<ButtonProps>;
@@ -31,6 +33,9 @@ export interface XEditModeHandlers {
     onMoveColumnLeft: (field: string) => void;
     onMoveColumnRight: (field: string) => void;
 }
+/**
+ * @deprecated was used to send props displayed and openForm to *Browse when using XFormNavigator (deprecated)
+ */
 export interface XBrowseProps {
     displayed?: boolean;
     openForm?: (newFormElement: JSX.Element | null) => void;
@@ -47,6 +52,10 @@ export declare enum XStateKeySuffix {
     selectedRow = "selected-row",
     multilineSwitchValue = "multiline-switch-value"
 }
+export interface XLazyDataTableRef {
+    reread: () => void;
+    setupExpandedRows: () => void;
+}
 export interface XLazyDataTableProps {
     entity: string;
     stateKey?: string;
@@ -55,21 +64,22 @@ export interface XLazyDataTableProps {
     dataKey?: string;
     rowExpansionTemplate?: (row: any, options: DataTableRowExpansionTemplate) => React.ReactNode;
     showExpandedRow?: (row: any, multilineSwitchValue: XMultilineRenderType) => boolean;
-    paginator: boolean;
-    rows: number;
-    filterDisplay: "menu" | "row";
+    paginator?: boolean;
+    rows?: number;
+    filterDisplay?: "menu" | "row";
     betweenFilter?: XBetweenFilterProp;
-    autoFilter: boolean;
-    showFilterButtons: boolean;
+    autoFilter?: boolean;
+    showFilterButtons?: boolean;
     showExportRows?: boolean;
-    scrollable: boolean;
-    scrollWidth: string;
-    scrollHeight: string;
+    scrollable?: boolean;
+    scrollWidth?: string;
+    scrollHeight?: string;
     formFooterHeight?: string;
-    shrinkWidth: boolean;
+    shrinkWidth?: boolean;
     onResetTable?: () => void;
-    onAddRow?: (filters: DataTableFilterMeta) => void;
-    onEdit?: (selectedRow: any) => void;
+    editForm?: JSX.Element;
+    onAddRow?: ((filters: DataTableFilterMeta, openFormForInsert: XOpenFormForInsert) => void) | false;
+    onEdit?: ((selectedRow: any, openFormForUpdate: XOpenFormForUpdate) => void) | false;
     removeRow?: ((selectedRow: any) => Promise<boolean>) | boolean;
     onRemoveRow?: XOnSaveOrCancelProp;
     docTemplates?: true | ((entity: string) => Promise<XtDocTemplate[]>);
@@ -79,41 +89,27 @@ export interface XLazyDataTableProps {
     customFilter?: XCustomFilter;
     optionalCustomFilters?: XOptionalCustomFilter[];
     sortField?: string | DataTableSortMeta[];
-    fullTextSearch: boolean | string[];
+    fullTextSearch?: boolean | string[];
     fields?: string[];
-    multilineSwitch: boolean;
-    multilineSwitchInitValue: XMultilineRenderType;
-    multilineSwitchFewLinesCount: number;
+    multilineSwitch?: boolean;
+    multilineSwitchInitValue?: XMultilineRenderType;
+    multilineSwitchFewLinesCount?: number;
     multilineSwitchValue?: [XMultilineRenderType, React.Dispatch<React.SetStateAction<XMultilineRenderType>>];
     headerBodyRight?: React.ReactNode;
     searchBrowseParams?: XSearchBrowseParams;
     width?: string;
     rowClassName?: (data: any) => object | string | undefined;
-    dataLoadedState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
     exportFieldsToDuplicateValues?: string[];
     editMode?: boolean;
     editModeHandlers?: XEditModeHandlers;
+    /**
+     * @deprecated was used to reread data after save/cancel of the form when using XFormNavigator (deprecated),
+     * now method reread() is exposed and supposed to be called in onSaveOrCancel of the form
+     */
     displayed?: boolean;
     children: ReactChild[];
 }
-export declare const XLazyDataTable: {
-    (props: XLazyDataTableProps): React.JSX.Element;
-    defaultProps: {
-        paginator: boolean;
-        rows: number;
-        filterDisplay: string;
-        autoFilter: boolean;
-        showFilterButtons: boolean;
-        fullTextSearch: boolean;
-        multilineSwitch: boolean;
-        multilineSwitchInitValue: string;
-        multilineSwitchFewLinesCount: number;
-        scrollable: boolean;
-        scrollWidth: string;
-        scrollHeight: string;
-        shrinkWidth: boolean;
-    };
-};
+export declare const XLazyDataTable: React.ForwardRefExoticComponent<XLazyDataTableProps & React.RefAttributes<XLazyDataTableRef>>;
 export type XGetFilterItem = (field: string) => DataTableFilterMetaData | DataTableOperatorFilterMetaData;
 export type XSetFilterItem = (field: string, filterItem: DataTableFilterMetaData | DataTableOperatorFilterMetaData, autoFilter: boolean) => void;
 export type XFilterElementParams = {

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -69,6 +69,17 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __values = (this && this.__values) || function(o) {
     var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
     if (m) return m.call(o);
@@ -138,6 +149,7 @@ var useXStateSession_1 = require("../useXStateSession");
 var useXStateSessionBase_1 = require("../useXStateSessionBase");
 var _ = __importStar(require("lodash"));
 var XDocTemplateButton_1 = require("../../modules/docTemplates/XDocTemplateButton");
+var XFormDialog_1 = require("../XFormDialog");
 var XStateKeySuffix;
 (function (XStateKeySuffix) {
     XStateKeySuffix["filters"] = "filters";
@@ -148,8 +160,14 @@ var XStateKeySuffix;
     XStateKeySuffix["selectedRow"] = "selected-row";
     XStateKeySuffix["multilineSwitchValue"] = "multiline-switch-value";
 })(XStateKeySuffix = exports.XStateKeySuffix || (exports.XStateKeySuffix = {}));
-var XLazyDataTable = function (props) {
-    var _a, _b;
+exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b;
+    var _c = _a.paginator, paginator = _c === void 0 ? true : _c, _d = _a.rows, rows = _d === void 0 ? 30 : _d, _e = _a.filterDisplay, filterDisplay = _e === void 0 ? "row" : _e, _f = _a.autoFilter, autoFilter = _f === void 0 ? false : _f, _g = _a.showFilterButtons, showFilterButtons = _g === void 0 ? true : _g, _h = _a.fullTextSearch, fullTextSearch = _h === void 0 ? true : _h, _j = _a.multilineSwitch, multilineSwitch = _j === void 0 ? false : _j, _k = _a.multilineSwitchInitValue, multilineSwitchInitValue = _k === void 0 ? "allLines" : _k, _l = _a.multilineSwitchFewLinesCount, multilineSwitchFewLinesCount = _l === void 0 ? 2 : _l, _m = _a.scrollable, scrollable = _m === void 0 ? true : _m, _o = _a.scrollWidth, scrollWidth = _o === void 0 ? 'viewport' : _o, // nastavi sirku tabulky na (100vw - nieco) (ak bude obsah sirsi, zapne horizontalny scrollbar)
+    _p = _a.scrollHeight, // nastavi sirku tabulky na (100vw - nieco) (ak bude obsah sirsi, zapne horizontalny scrollbar)
+    scrollHeight = _p === void 0 ? 'viewport' : _p, // nastavi vysku tabulky na (100vh - nieco) (ak bude obsah vecsi, zapne vertikalny scrollbar)
+    _q = _a.shrinkWidth, // nastavi vysku tabulky na (100vh - nieco) (ak bude obsah vecsi, zapne vertikalny scrollbar)
+    shrinkWidth = _q === void 0 ? true : _q, propsRest = __rest(_a, ["paginator", "rows", "filterDisplay", "autoFilter", "showFilterButtons", "fullTextSearch", "multilineSwitch", "multilineSwitchInitValue", "multilineSwitchFewLinesCount", "scrollable", "scrollWidth", "scrollHeight", "shrinkWidth"]);
+    var props = __assign({ paginator: paginator, rows: rows, filterDisplay: filterDisplay, autoFilter: autoFilter, showFilterButtons: showFilterButtons, fullTextSearch: fullTextSearch, multilineSwitch: multilineSwitch, multilineSwitchInitValue: multilineSwitchInitValue, multilineSwitchFewLinesCount: multilineSwitchFewLinesCount, scrollable: scrollable, scrollWidth: scrollWidth, scrollHeight: scrollHeight, shrinkWidth: shrinkWidth }, propsRest);
     // must be here, is used in createFiltersInit()
     var xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.entity);
     var createAggregateItems = function () {
@@ -320,12 +338,12 @@ var XLazyDataTable = function (props) {
     // ak mame fieldSet stlpce (stlpce ktore maju zadany fieldSetId a zobrazuju hodnoty podla fieldSet-u),
     // tak sem nacitame mapy umoznujuce ziskanie labelov zakliknutych field-ov
     // poznamka: uz by sa zislo mat vytvorene objekty (instancie) pre stlpce a do nich zapisovat pripadny XFieldSetMap, filter (teraz je vo "filters")
-    var _c = __read((0, react_1.useState)({}), 2), xFieldSetMaps = _c[0], setXFieldSetMaps = _c[1];
-    var _d = __read((0, react_1.useState)({ rowList: [], totalRecords: 0, aggregateValues: [] }), 2), value = _d[0], setValue = _d[1];
-    var _e = __read((0, react_1.useState)(undefined), 2), expandedRows = _e[0], setExpandedRows = _e[1];
-    var _f = __read((0, react_1.useState)(false), 2), loading = _f[0], setLoading = _f[1];
-    var _g = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.pagingFirst), 0), 2), first = _g[0], setFirst = _g[1];
-    var _h = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rows = _h[0], setRows = _h[1];
+    var _r = __read((0, react_1.useState)({}), 2), xFieldSetMaps = _r[0], setXFieldSetMaps = _r[1];
+    var _s = __read((0, react_1.useState)({ rowList: [], totalRecords: 0, aggregateValues: [] }), 2), value = _s[0], setValue = _s[1];
+    var _t = __read((0, react_1.useState)(undefined), 2), expandedRows = _t[0], setExpandedRows = _t[1];
+    var _u = __read((0, react_1.useState)(false), 2), loading = _u[0], setLoading = _u[1];
+    var _v = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.pagingFirst), 0), 2), first = _v[0], setFirst = _v[1];
+    var _w = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rowsLocal = _w[0], setRowsLocal = _w[1];
     // "filters" have special initialState function different from that used in useXStateSession
     var filtersInitialStateFunction = function () {
         var filtersInit = XUtils_1.XUtils.getValueFromStorage(getStateKey(XStateKeySuffix.filters), null);
@@ -339,19 +357,23 @@ var XLazyDataTable = function (props) {
         }
         return filtersInit;
     };
-    var _j = __read((0, useXStateSessionBase_1.useXStateSessionBase)(getStateKey(XStateKeySuffix.filters), filtersInitialStateFunction), 2), filters = _j[0], setFilters = _j[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
+    var _x = __read((0, useXStateSessionBase_1.useXStateSessionBase)(getStateKey(XStateKeySuffix.filters), filtersInitialStateFunction), 2), filters = _x[0], setFilters = _x[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
     var initFtsInputValue = props.fullTextSearch ? createInitFtsInputValue() : undefined;
-    var _k = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.ftsInputValue), initFtsInputValue), 2), ftsInputValue = _k[0], setFtsInputValue = _k[1];
-    var _l = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.optionalCustomFilter), undefined), 2), optionalCustomFilter = _l[0], setOptionalCustomFilter = _l[1];
-    var _m = __read((_a = props.multilineSwitchValue) !== null && _a !== void 0 ? _a : (0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.multilineSwitchValue), props.multilineSwitchInitValue), 2), multilineSwitchValue = _m[0], setMultilineSwitchValue = _m[1];
-    var _o = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.multiSortMeta), XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _o[0], setMultiSortMeta = _o[1];
-    var _p = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.selectedRow), null), 2), selectedRow = _p[0], setSelectedRow = _p[1];
-    var _q = __read((_b = props.dataLoadedState) !== null && _b !== void 0 ? _b : (0, react_1.useState)(false), 2), dataLoaded = _q[0], setDataLoaded = _q[1]; // priznak kde si zapiseme, ci uz sme nacitali data
-    var _r = __read((0, react_1.useState)({ dialogOpened: false }), 2), exportRowsDialogState = _r[0], setExportRowsDialogState = _r[1];
+    var _y = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.ftsInputValue), initFtsInputValue), 2), ftsInputValue = _y[0], setFtsInputValue = _y[1];
+    var _z = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.optionalCustomFilter), undefined), 2), optionalCustomFilter = _z[0], setOptionalCustomFilter = _z[1];
+    var _0 = __read((_b = props.multilineSwitchValue) !== null && _b !== void 0 ? _b : (0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.multilineSwitchValue), props.multilineSwitchInitValue), 2), multilineSwitchValue = _0[0], setMultilineSwitchValue = _0[1];
+    var _1 = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.multiSortMeta), XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _1[0], setMultiSortMeta = _1[1];
+    var _2 = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.selectedRow), null), 2), selectedRow = _2[0], setSelectedRow = _2[1];
+    /**
+     * @deprecated was used to reread data after save/cancel of the form when using XFormNavigator (deprecated)
+     */
+    var _3 = __read((0, react_1.useState)(false), 2), dataLoaded = _3[0], setDataLoaded = _3[1]; // priznak kde si zapiseme, ci uz sme nacitali data
+    var _4 = __read((0, react_1.useState)({ dialogOpened: false }), 2), exportRowsDialogState = _4[0], setExportRowsDialogState = _4[1];
     //const [exportRowsDialogRowCount, setExportRowsDialogRowCount] = useState<number>(); // param pre dialog
-    var _s = __read((0, react_1.useState)(filters), 2), filtersAfterFiltering = _s[0], setFiltersAfterFiltering = _s[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
-    var _t = __read((0, react_1.useState)(ftsInputValue), 2), ftsInputValueAfterFiltering = _t[0], setFtsInputValueAfterFiltering = _t[1]; // tak isto ako filtersAfterFiltering
-    var _u = __read((0, react_1.useState)(optionalCustomFilter), 2), optionalCustomFilterAfterFiltering = _u[0], setOptionalCustomFilterAfterFiltering = _u[1]; // tak isto ako filtersAfterFiltering
+    var _5 = __read((0, react_1.useState)(filters), 2), filtersAfterFiltering = _5[0], setFiltersAfterFiltering = _5[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
+    var _6 = __read((0, react_1.useState)(ftsInputValue), 2), ftsInputValueAfterFiltering = _6[0], setFtsInputValueAfterFiltering = _6[1]; // tak isto ako filtersAfterFiltering
+    var _7 = __read((0, react_1.useState)(optionalCustomFilter), 2), optionalCustomFilterAfterFiltering = _7[0], setOptionalCustomFilterAfterFiltering = _7[1]; // tak isto ako filtersAfterFiltering
+    var _8 = __read((0, react_1.useState)({ opened: false }), 2), formDialogState = _8[0], setFormDialogState = _8[1];
     // parameter [] zabezpeci ze sa metoda zavola len po prvom renderingu (a nie po kazdej zmene stavu (zavolani setNieco()))
     (0, react_1.useEffect)(function () {
         // jednoduchy sposob - nepouzivame parameter props.displayed a priznak dataLoaded
@@ -378,6 +400,10 @@ var XLazyDataTable = function (props) {
             }
         }
     }); // eslint-disable-line react-hooks/exhaustive-deps
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        reread: reread,
+        setupExpandedRows: function () { return setupExpandedRows(value, multilineSwitchValue); }
+    }); });
     // TODO - preco je to tu? presunut dole ak sa da...
     var dataKey = props.dataKey !== undefined ? props.dataKey : XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.entity).idField;
     var onPage = function (event) { return __awaiter(void 0, void 0, void 0, function () {
@@ -463,6 +489,10 @@ var XLazyDataTable = function (props) {
         findParam.multiSortMeta = multiSortMetaLocal;
         loadDataBase(findParam);
     };
+    // API function
+    var reread = function () {
+        loadData();
+    };
     var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -483,7 +513,7 @@ var XLazyDataTable = function (props) {
         return {
             resultType: FindParam_1.ResultType.RowCountAndPagedRows,
             first: first,
-            rows: rows,
+            rows: rowsLocal,
             filters: filters,
             fullTextSearch: createXFullTextSearch(ftsInputValue),
             customFilterItems: createXCustomFilterItems(customFilterItems, optionalCustomFilter),
@@ -724,51 +754,92 @@ var XLazyDataTable = function (props) {
         onRowDoubleClickBase(event.data);
     };
     var onRowDoubleClickBase = function (row) {
-        if (props.onEdit !== undefined && props.searchBrowseParams === undefined) {
-            props.onEdit(row);
+        if (props.searchBrowseParams === undefined) {
+            editRow(row);
         }
-        else if (props.searchBrowseParams !== undefined) {
+        else {
             props.searchBrowseParams.onChoose(row);
         }
     };
     var onClickAddRow = function () {
         //console.log("zavolany onClickAddRow");
-        if (props.onAddRow !== undefined) {
-            props.onAddRow(filters);
+        if (typeof props.onAddRow === 'function') {
+            props.onAddRow(filters, openFormForInsert);
+        }
+        else if (props.editForm !== undefined && props.onAddRow !== false) {
+            openFormForInsert();
         }
     };
-    var onClickEdit = function () {
-        //console.log("zavolany onClickEdit");
+    var openFormForInsert = function (initValues, onSaveOrCancel, form) {
+        if (props.editForm === undefined && form === undefined) {
+            throw "No form declared. XLazyDataTable.editForm is undefined and also form in call of the method openFormForInsert is undefined.";
+        }
+        setFormDialogState({
+            opened: true,
+            id: undefined,
+            initValues: initValues,
+            onSaveOrCancel: onSaveOrCancel !== null && onSaveOrCancel !== void 0 ? onSaveOrCancel : editRowOnSaveOrCancel,
+            form: form !== null && form !== void 0 ? form : props.editForm
+        });
+    };
+    var onClickEditRow = function () {
+        //console.log("zavolany onClickEditRow");
         if (selectedRow !== null) {
-            if (props.onEdit !== undefined) {
-                props.onEdit(selectedRow);
-            }
+            editRow(selectedRow);
         }
         else {
             alert((0, XLocale_1.xLocaleOption)('pleaseSelectRow'));
         }
     };
+    var editRow = function (row) {
+        if (typeof props.onEdit === 'function') {
+            props.onEdit(row, openFormForUpdate);
+        }
+        else if (props.editForm !== undefined && props.onEdit !== false) {
+            openFormForUpdate(row[dataKey]);
+        }
+    };
+    var openFormForUpdate = function (id, onSaveOrCancel, form) {
+        if (props.editForm === undefined && form === undefined) {
+            throw "No form declared. XLazyDataTable.editForm is undefined and also form in call of the method openFormForUpdate is undefined.";
+        }
+        setFormDialogState({
+            opened: true,
+            id: id,
+            initValues: undefined,
+            onSaveOrCancel: onSaveOrCancel !== null && onSaveOrCancel !== void 0 ? onSaveOrCancel : editRowOnSaveOrCancel,
+            form: form !== null && form !== void 0 ? form : props.editForm
+        });
+    };
+    var editRowOnSaveOrCancel = function (object, objectChange) {
+        if (object !== null) {
+            // save was pressed, reread from DB
+            loadData();
+        }
+        // if object === null, then cancel was pressed, we do nothing, we just close the dialog
+        setFormDialogState({ opened: false });
+    };
     var onClickRemoveRow = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var reread, e_9, e_10;
+        var reread_1, e_9, e_10;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (!(selectedRow !== null)) return [3 /*break*/, 11];
                     if (!(props.removeRow instanceof Function)) return [3 /*break*/, 5];
-                    reread = true;
+                    reread_1 = true;
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
                     return [4 /*yield*/, props.removeRow(selectedRow)];
                 case 2:
-                    reread = _a.sent();
+                    reread_1 = _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
                     e_9 = _a.sent();
                     XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_9);
                     return [3 /*break*/, 4];
                 case 4:
-                    if (reread) {
+                    if (reread_1) {
                         loadData();
                         if (props.onRemoveRow) {
                             props.onRemoveRow(selectedRow, XUtils_1.OperationType.Remove);
@@ -821,7 +892,7 @@ var XLazyDataTable = function (props) {
                     findParam = {
                         resultType: FindParam_1.ResultType.OnlyRowCount,
                         first: first,
-                        rows: rows,
+                        rows: rowsLocal,
                         filters: filtersAfterFiltering,
                         fullTextSearch: createXFullTextSearch(ftsInputValueAfterFiltering),
                         customFilterItems: createXCustomFilterItems(customFilterItems, optionalCustomFilterAfterFiltering),
@@ -1041,19 +1112,19 @@ var XLazyDataTable = function (props) {
     };
     // ak mame scrollWidth/scrollHeight = viewport (default), vyratame scrollWidth/scrollHeight tak aby tabulka "sadla" do okna (viewport-u)
     var isMobile = XUtils_1.XUtils.isMobile();
-    var scrollWidth = undefined; // vypnute horizontalne scrollovanie
-    var scrollHeight = undefined; // vypnute vertikalne scrollovanie
+    var scrollWidthLocal = undefined; // vypnute horizontalne scrollovanie
+    var scrollHeightLocal = undefined; // vypnute vertikalne scrollovanie
     if (props.scrollable) {
         if (props.scrollWidth !== "none") {
-            scrollWidth = props.scrollWidth;
-            if (scrollWidth === "viewport") {
-                scrollWidth = "calc(100vw - ".concat(isMobile ? 1 : 2.2, "rem)"); // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
+            scrollWidthLocal = props.scrollWidth;
+            if (scrollWidthLocal === "viewport") {
+                scrollWidthLocal = "calc(100vw - ".concat(isMobile ? 1 : 2.2, "rem)"); // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
                 // mobil - padding 0.5rem body element
             }
         }
         if (props.scrollHeight !== "none") {
-            scrollHeight = props.scrollHeight;
-            if (scrollHeight === "viewport") {
+            scrollHeightLocal = props.scrollHeight;
+            if (scrollHeightLocal === "viewport") {
                 // vypocet je priblizny, robeny na mobil, desktop bude mat mozno iny
                 //const headerHeight = XUtils.toPX0('12.7rem');
                 //let footerHeight = XUtils.toPX0('3.7rem') + XUtils.toPX0('3rem'); // table footer (paging) + buttons Add row, Edit, ...
@@ -1090,13 +1161,13 @@ var XLazyDataTable = function (props) {
                 if (props.formFooterHeight !== undefined) {
                     headerFooterHeight += XUtils_1.XUtils.toPX0(XUtils_1.XUtils.processGridBreakpoints(props.formFooterHeight));
                 }
-                scrollHeight = "calc(".concat(viewHeight, " - ").concat(headerFooterHeight, "px)");
+                scrollHeightLocal = "calc(".concat(viewHeight, " - ").concat(headerFooterHeight, "px)");
             }
         }
     }
     var style = {};
-    if (scrollWidth !== undefined) {
-        style.width = scrollWidth;
+    if (scrollWidthLocal !== undefined) {
+        style.width = scrollWidthLocal;
     }
     if (props.shrinkWidth) {
         style.maxWidth = 'min-content'; // ak nic nedame (nechame auto), tak (v pripade ak nebudeme mat horizontalny scrollbar) natiahne tabulku na celu sirku stranky, co nechceme
@@ -1391,35 +1462,20 @@ var XLazyDataTable = function (props) {
             props.headerBodyRight,
             props.label && !isMobile ? react_1.default.createElement("div", { className: "x-lazy-datatable-label-right-compensation" }) : null),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
-            react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, expandedRows: expandedRows, rowExpansionTemplate: props.rowExpansionTemplate ? rowExpansionTemplate : undefined, paginator: props.paginator, pageLinkSize: pageLinkSize, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filterDisplay: props.filterDisplay, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, rowClassName: props.rowClassName, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
+            react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, expandedRows: expandedRows, rowExpansionTemplate: props.rowExpansionTemplate ? rowExpansionTemplate : undefined, paginator: props.paginator, pageLinkSize: pageLinkSize, rows: rowsLocal, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filterDisplay: props.filterDisplay, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, rowClassName: props.rowClassName, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeightLocal, style: style }, columnElemList)),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
-            props.onAddRow !== undefined && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "addRow", icon: "pi pi-plus", label: (0, XLocale_1.xLocaleOption)('addRow'), onClick: onClickAddRow }) : null,
-            props.onEdit !== undefined && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "editRow", icon: "pi pi-pencil", label: (0, XLocale_1.xLocaleOption)('editRow'), onClick: onClickEdit }) : null,
-            props.removeRow !== undefined && props.removeRow !== false && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "removeRow", icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('removeRow'), onClick: onClickRemoveRow }) : null,
+            (props.onAddRow !== false && (props.editForm !== undefined || props.onAddRow !== undefined)) && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "addRow", icon: "pi pi-plus", label: (0, XLocale_1.xLocaleOption)('addRow'), onClick: onClickAddRow }) : null,
+            (props.onEdit !== false && (props.editForm !== undefined || props.onEdit !== undefined)) && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "editRow", icon: "pi pi-pencil", label: (0, XLocale_1.xLocaleOption)('editRow'), onClick: onClickEditRow }) : null,
+            (props.removeRow !== false && (props.removeRow !== undefined)) && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "removeRow", icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('removeRow'), onClick: onClickRemoveRow }) : null,
             exportRows ? react_1.default.createElement(XButton_1.XButton, { key: "exportRows", icon: "pi pi-file-export", label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onClickExport }) : null,
-            props.docTemplates && !isMobile && props.searchBrowseParams === undefined ? react_1.default.createElement(XDocTemplateButton_1.XDocTemplateButton, { key: "docTemplates", entity: props.entity, rowId: selectedRow ? selectedRow[xEntity.idField] : undefined, docTemplates: typeof props.docTemplates === 'function' ? props.docTemplates : undefined }) : null,
+            props.docTemplates && !isMobile && props.searchBrowseParams === undefined ? react_1.default.createElement(XDocTemplateButton_1.XDocTemplateButton, { key: "docTemplates", entity: props.entity, rowId: selectedRow ? selectedRow[dataKey] : undefined, docTemplates: typeof props.docTemplates === 'function' ? props.docTemplates : undefined }) : null,
             props.appButtonsForRow && props.searchBrowseParams === undefined ? props.appButtonsForRow.map(function (xAppButton) { return react_1.default.createElement(XButton_1.XButton, { key: xAppButton.key, icon: xAppButton.icon, label: xAppButton.label, onClick: function () { return onClickAppButtonForRow(xAppButton.onClick); }, style: xAppButton.style }); }) : null,
             props.appButtons && props.searchBrowseParams === undefined,
             props.searchBrowseParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "choose", label: (0, XLocale_1.xLocaleOption)('chooseRow'), onClick: onClickChoose }) : null,
+            props.editForm != undefined ? react_1.default.createElement(XFormDialog_1.XFormDialog, { key: "formDialog", dialogState: formDialogState }) : null,
             exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { key: "exportRowsDialog", dialogState: exportRowsDialogState, hideDialog: function () { return setExportRowsDialogState({ dialogOpened: false }); } }) : null),
         hasContentTypeHtml() ? react_1.default.createElement(editor_1.Editor, { style: { display: 'none' }, showHeader: false }) : null /* we want to import css if needed (<style type="text/css" data-primereact-style-id="editor">) */));
-};
-exports.XLazyDataTable = XLazyDataTable;
-exports.XLazyDataTable.defaultProps = {
-    paginator: true,
-    rows: 10,
-    filterDisplay: "row",
-    autoFilter: false,
-    showFilterButtons: true,
-    fullTextSearch: true,
-    multilineSwitch: false,
-    multilineSwitchInitValue: "allLines",
-    multilineSwitchFewLinesCount: 2,
-    scrollable: true,
-    scrollWidth: 'viewport',
-    scrollHeight: 'viewport',
-    shrinkWidth: true
-};
+});
 // TODO - XLazyColumn neni idealny nazov, lepsi je XColumn (ale zatial nechame XLazyColumn)
 var XLazyColumn = function (props) {
     // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element

package/lib/components/XUtils.d.ts

@@ -8,6 +8,8 @@ import { DataTableSortMeta } from "primereact/datatable";
 import { XObject } from "./XObject";
 import { XTableFieldReadOnlyProp } from "./XFormDataTable2";
 import { SelectItem } from "primereact/selectitem";
+import { XLazyDataTableRef } from "./XLazyDataTable/XLazyDataTable";
+import { XOnSaveOrCancelProp } from "./XFormBase";
 export declare enum OperationType {
     None = 0,
     Insert = 1,
@@ -117,4 +119,8 @@ export declare class XUtils {
     static isLocalhost(): boolean;
     static isNewVersion(): Promise<boolean>;
     static reload(): void;
+    /**
+     * @deprecated returns onSaveOrCancel method used when opening form from browse when using XFormNavigator (deprecated)
+     */
+    static onSaveOrCancelNavigator(openForm: (newFormElement: JSX.Element | null) => void, xLazyDataTableRef: React.RefObject<XLazyDataTableRef>): XOnSaveOrCancelProp;
 }

package/lib/components/XUtils.js

@@ -105,7 +105,9 @@ var XUtils = /** @class */ (function () {
         // extra small displays (podla https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp)
         // mozno tu treba dat (window.screen.width * window.devicePixelRatio)
         // bolo 600 ($sm = 576 (primeflex)) - len ak bol mobil na vysku, 768 ma byt aj pre mobil na sirku
-        return typeof window !== 'undefined' && window.screen.availWidth < 768; // $sm = 576 (primeflex)
+        //return typeof window !== 'undefined' && window.screen.availWidth < 768; // $sm = 576 (primeflex)
+        // blblo mi window.screen.availWidth (vracalo 1920 v mobile mode v browseri)
+        return XUtils.getViewWidth() < 768;
     };
     XUtils.mobileCssSuffix = function () {
         return XUtils.isMobile() ? '-mobile' : '';
@@ -170,7 +172,9 @@ var XUtils = /** @class */ (function () {
         var breakpointsToFind;
         var availWidth;
         if (typeof window !== 'undefined') {
-            availWidth = window.screen.availWidth; // pouzivame availWidth, nie width, availWidth odratava napr. taskbar
+            //availWidth = window.screen.availWidth; // pouzivame availWidth, nie width, availWidth odratava napr. taskbar
+            // blblo mi window.screen.availWidth (vracalo 1920 v mobile mode v browseri) - mozno by tu malo byt window.outerWidth
+            availWidth = XUtils.getViewWidth();
             if (availWidth < 576) {
                 breakpointsToFind = ['xs:'];
             }
@@ -864,6 +868,20 @@ var XUtils = /** @class */ (function () {
         // warning - if user has typed some data in form, the data will be lost
         window.location.reload();
     };
+    /**
+     * @deprecated returns onSaveOrCancel method used when opening form from browse when using XFormNavigator (deprecated)
+     */
+    XUtils.onSaveOrCancelNavigator = function (openForm, xLazyDataTableRef) {
+        return function (object, objectChange) {
+            var _a;
+            // close form and display the previous form (it should be browse)
+            openForm(null);
+            if (object !== null) {
+                // save was pressed, reread from DB
+                (_a = xLazyDataTableRef.current) === null || _a === void 0 ? void 0 : _a.reread();
+            }
+        };
+    };
     XUtils.dropdownEmptyOptionValue = " ";
     XUtils.xBackendUrl = undefined;
     // nacachovany XToken - na rozlicnych miestach potrebujeme vediet uzivatela

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.35.0",
+  "version": "1.35.2",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",