@michalrakus/x-react-web-lib 1.32.5 → 1.32.7

package/gulpfile.js

@@ -30,6 +30,7 @@ function generateApi(cb) {
         "./lib/components/XLazyDataTable/XLazyDataTable",
         "./lib/components/XLazyDataTable/XMultilineRenderer",
 
+        "./lib/components/useXStateSession",
         "./lib/components/useXToken",
         "./lib/components/XAutoComplete",
         "./lib/components/XAutoCompleteBase",

package/lib/components/XEditorBase.js

@@ -49,11 +49,59 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XEditorBase = void 0;
 var react_1 = __importStar(require("react"));
 var XUtils_1 = require("./XUtils");
 var editor_1 = require("primereact/editor");
+var quill_1 = __importDefault(require("quill"));
+// bez tohto kodu size options nefunguju
+var Size = quill_1.default.import('attributors/style/size');
+Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '24px', '32px', '48px'];
+quill_1.default.register(Size, true);
+var Font = quill_1.default.import('formats/font');
+Font.whitelist = [
+    'sans-serif', 'serif', 'monospace',
+    'times-new-roman', 'comic-sans',
+];
+quill_1.default.register(Font, true);
+var headerTemplate = function () {
+    // poznamka - k tomuto layout-u sa este viazu css styly umiestnene v App.css
+    var styleMarginRight = { marginRight: '0.7rem' };
+    return (react_1.default.createElement("span", { className: "ql-formats" },
+        react_1.default.createElement("select", { className: "ql-font", "aria-label": "Font" },
+            react_1.default.createElement("option", { value: "sans-serif", selected: true }, "Sans-Serif"),
+            react_1.default.createElement("option", { value: "serif" }, "Serif"),
+            react_1.default.createElement("option", { value: "monospace" }, "Monospace"),
+            react_1.default.createElement("option", { value: "times-new-roman" }, "TimesNewRoman"),
+            react_1.default.createElement("option", { value: "comic-sans" }, "Comic Sans")),
+        react_1.default.createElement("select", { className: "ql-size", "aria-label": "Font Size", style: styleMarginRight },
+            react_1.default.createElement("option", { value: "10px" }, "10"),
+            react_1.default.createElement("option", { value: "12px", selected: true }, "12"),
+            react_1.default.createElement("option", { value: "14px" }, "14"),
+            react_1.default.createElement("option", { value: "16px" }, "16"),
+            react_1.default.createElement("option", { value: "18px" }, "18"),
+            react_1.default.createElement("option", { value: "24px" }, "24"),
+            react_1.default.createElement("option", { value: "32px" }, "32"),
+            react_1.default.createElement("option", { value: "48px" }, "48")),
+        react_1.default.createElement("button", { className: "ql-bold", "aria-label": "Bold" }),
+        react_1.default.createElement("button", { className: "ql-italic", "aria-label": "Italic" }),
+        react_1.default.createElement("button", { className: "ql-underline", "aria-label": "Underline" }),
+        react_1.default.createElement("button", { className: "ql-strike", "aria-label": "Strikethrough", style: styleMarginRight }),
+        react_1.default.createElement("select", { className: "ql-color", "aria-label": "Text Color" }),
+        react_1.default.createElement("select", { className: "ql-background", "aria-label": "Background Color", style: styleMarginRight }),
+        react_1.default.createElement("select", { className: "ql-align", "aria-label": "Text Alignment", style: styleMarginRight },
+            react_1.default.createElement("option", { selected: true }),
+            react_1.default.createElement("option", { value: "center" }),
+            react_1.default.createElement("option", { value: "right" })),
+        react_1.default.createElement("button", { className: "ql-list", value: "ordered", "aria-label": "Ordered List" }),
+        react_1.default.createElement("button", { className: "ql-list", value: "bullet", "aria-label": "Bullet List" }),
+        react_1.default.createElement("button", { className: "ql-indent", value: "-1", "aria-label": "Indent to the left" }),
+        react_1.default.createElement("button", { className: "ql-indent", value: "+1", "aria-label": "Indent to the right" })));
+};
 // koli optimalizacii - typovany text si zapisuje do svojej stavovej premennej a onChange zavola az z onBlur
 // pri velkych formularoch je totiz volanie zmeny stavu this.setState({object: this.state.object, errorMap: this.state.errorMap}); pomale
 var XEditorBase = function (props) {
@@ -86,6 +134,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.createTooltipOrErrorProps(props.error))));
+    return (react_1.default.createElement(editor_1.Editor, __assign({ id: props.id, value: getValue(), onTextChange: onTextChange, onBlur: onBlur, readOnly: props.readOnly, pt: { root: { style: props.style } } }, XUtils_1.XUtils.createTooltipOrErrorProps(props.error), { headerTemplate: headerTemplate() })));
 };
 exports.XEditorBase = XEditorBase;

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

@@ -37,8 +37,18 @@ export interface XBrowseProps {
 export interface XSearchBrowseProps {
     searchBrowseParams?: XSearchBrowseParams;
 }
+export declare enum XStateKeySuffix {
+    filters = "filters",
+    ftsInputValue = "fts-input-value",
+    optionalCustomFilter = "optional-custom-filter",
+    multiSortMeta = "multi-sort-meta",
+    pagingFirst = "paging-first",
+    selectedRow = "selected-row",
+    multilineSwitchValue = "multiline-switch-value"
+}
 export interface XLazyDataTableProps {
     entity: string;
+    stateKey?: string;
     label?: string;
     dataKey?: string;
     rowExpansionTemplate?: (row: any, options: DataTableRowExpansionTemplate) => React.ReactNode;
@@ -55,6 +65,7 @@ export interface XLazyDataTableProps {
     scrollHeight: string;
     formFooterHeight?: string;
     shrinkWidth: boolean;
+    onResetTable?: () => void;
     onAddRow?: () => void;
     onEdit?: (selectedRow: any) => void;
     removeRow?: ((selectedRow: any) => Promise<boolean>) | boolean;

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -106,7 +106,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XLazyColumn = exports.XLazyDataTable = void 0;
+exports.XLazyColumn = exports.XLazyDataTable = exports.XStateKeySuffix = void 0;
 var react_1 = __importStar(require("react"));
 var datatable_1 = require("primereact/datatable");
 var column_1 = require("primereact/column");
@@ -134,9 +134,22 @@ var XOcfDropdown_1 = require("./XOcfDropdown");
 var XFieldSetBase_1 = require("../XFieldSet/XFieldSetBase");
 var XAutoCompleteBase_1 = require("../XAutoCompleteBase");
 var XInputTextBase_1 = require("../XInputTextBase");
+var useXStateSession_1 = require("../useXStateSession");
+var useXStateSessionBase_1 = require("../useXStateSessionBase");
+var _ = __importStar(require("lodash"));
+var XStateKeySuffix;
+(function (XStateKeySuffix) {
+    XStateKeySuffix["filters"] = "filters";
+    XStateKeySuffix["ftsInputValue"] = "fts-input-value";
+    XStateKeySuffix["optionalCustomFilter"] = "optional-custom-filter";
+    XStateKeySuffix["multiSortMeta"] = "multi-sort-meta";
+    XStateKeySuffix["pagingFirst"] = "paging-first";
+    XStateKeySuffix["selectedRow"] = "selected-row";
+    XStateKeySuffix["multilineSwitchValue"] = "multiline-switch-value";
+})(XStateKeySuffix = exports.XStateKeySuffix || (exports.XStateKeySuffix = {}));
 var XLazyDataTable = function (props) {
     var _a, _b;
-    // must be here, is used in createInitFilters()
+    // must be here, is used in createFiltersInit()
     var xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.entity);
     var createAggregateItems = function () {
         var e_1, _a;
@@ -160,9 +173,16 @@ var XLazyDataTable = function (props) {
         }
         return aggregateItems;
     };
-    var createInitFilters = function () {
+    var overrideFilters = function (filters, filtersHigherPrio) {
+        if (filtersHigherPrio) {
+            // deep clone is needed, otherwise filter elements write into "filters" and override the values in filtersHigherPrio ("props.filters") (simple cloning "..." is not enough to create 2 instances of filter values)
+            filters = __assign(__assign({}, filters), _.cloneDeep(filtersHigherPrio)); // items from filtersHigherPrio will replace existing items in filters
+        }
+        return filters;
+    };
+    var createFiltersInit = function () {
         var e_2, _a;
-        var initFilters = {};
+        var filtersInit = {};
         //let columns = dataTableEl.current.props.children; - does not work
         var columns = props.children;
         try {
@@ -173,7 +193,7 @@ var XLazyDataTable = function (props) {
                 var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
                 // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
                 var filterMatchMode = getInitFilterMatchMode(xLazyColumn.props, xField);
-                initFilters[field] = createFilterItem(props.filterDisplay, { value: null, matchMode: filterMatchMode });
+                filtersInit[field] = createFilterItem(props.filterDisplay, { value: null, matchMode: filterMatchMode });
             }
         }
         catch (e_2_1) { e_2 = { error: e_2_1 }; }
@@ -183,7 +203,14 @@ var XLazyDataTable = function (props) {
             }
             finally { if (e_2) throw e_2.error; }
         }
-        return initFilters;
+        filtersInit = overrideFilters(filtersInit, props.filters);
+        if (props.searchBrowseParams !== undefined) {
+            var displayFieldFilter = props.searchBrowseParams.displayFieldFilter;
+            if (displayFieldFilter !== undefined) {
+                filtersInit[displayFieldFilter.field] = createFilterItem(props.filterDisplay, displayFieldFilter.constraint);
+            }
+        }
+        return filtersInit;
     };
     var getInitFilterMatchMode = function (xLazyColumnProps, xField) {
         var filterMatchMode;
@@ -255,11 +282,37 @@ var XLazyDataTable = function (props) {
     var createInitFtsInputValue = function () {
         return { value: null, matchMode: "contains" };
     };
+    /*
+        // TODO turn off/on storage
+        const saveValueIntoStorage = (stateKeySuffix: XStateKeySuffix, value: any) => {
+            XUtils.saveValueIntoStorage(`${getTableStateKey()}-${stateKeySuffix}`, value);
+        }
+    
+        // TODO turn off/on storage
+        const getValueFromStorage = (stateKeySuffix: XStateKeySuffix, initValue: any): any => {
+            return XUtils.getValueFromStorage(`${getTableStateKey()}-${stateKeySuffix}`, initValue);
+        }
+    */
+    var getStateKey = function (stateKeySuffix) {
+        var _a;
+        return "xldt-state-".concat((_a = props.stateKey) !== null && _a !== void 0 ? _a : props.entity, "-").concat(stateKeySuffix);
+    };
+    var removePagingFromStorage = function () {
+        XUtils_1.XUtils.removeValueFromStorage(getStateKey(XStateKeySuffix.pagingFirst));
+    };
     // premenne platne pre cely component (obdoba member premennych v class-e)
     var primeReactContext = react_1.default.useContext(api_1.PrimeReactContext); // probably does not work and deprecated PrimeReact.filterMatchModeOptions is used
     var dataTableEl = (0, react_1.useRef)(null);
     var customFilterItems = XUtilsCommon_1.XUtilsCommon.createCustomFilterItems(props.customFilter);
+    if (props.searchBrowseParams !== undefined) {
+        // ak mame props.searchBrowseParams.customFilterFunction, pridame filter
+        if (props.searchBrowseParams.customFilter) {
+            customFilterItems = XUtilsCommon_1.XUtilsCommon.filterAnd(customFilterItems, XUtils_1.XUtils.evalFilter(props.searchBrowseParams.customFilter));
+        }
+    }
     var aggregateItems = createAggregateItems();
+    // poznamka k useXStateSession - v buducnosti nahradit useXStateStorage, ktory bude mat parameter session/local/none a parameter bude riadit aky storage sa pouzije
+    // zatial vzdy ukladame do session
     // 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")
@@ -267,35 +320,34 @@ var XLazyDataTable = function (props) {
     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, react_1.useState)(0), 2), first = _g[0], setFirst = _g[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 filtersInit = createInitFilters();
-    if (props.filters) {
-        filtersInit = __assign(__assign({}, filtersInit), props.filters); // items from props.filters will replace existing items in filtersInit
-    }
-    if (props.searchBrowseParams !== undefined) {
-        var displayFieldFilter = props.searchBrowseParams.displayFieldFilter;
-        if (displayFieldFilter !== undefined) {
-            filtersInit[displayFieldFilter.field] = createFilterItem(props.filterDisplay, displayFieldFilter.constraint);
+    // "filters" have special initialState function different from that used in useXStateSession
+    var filtersInitialStateFunction = function () {
+        var filtersInit = XUtils_1.XUtils.getValueFromStorage(getStateKey(XStateKeySuffix.filters), null);
+        if (filtersInit != null) {
+            // we have filters from session - if we have props.filters, we always override the values from session (values from props.filters have higher priority)
+            filtersInit = overrideFilters(filtersInit, props.filters);
         }
-        // ak mame props.searchBrowseParams.customFilterFunction, pridame filter
-        if (props.searchBrowseParams.customFilter) {
-            customFilterItems = XUtilsCommon_1.XUtilsCommon.filterAnd(customFilterItems, XUtils_1.XUtils.evalFilter(props.searchBrowseParams.customFilter));
+        else {
+            // no filters in session
+            filtersInit = createFiltersInit();
         }
-    }
-    var _j = __read((0, react_1.useState)(filtersInit), 2), filters = _j[0], setFilters = _j[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
+        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 initFtsInputValue = props.fullTextSearch ? createInitFtsInputValue() : undefined;
-    var _k = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValue = _k[0], setFtsInputValue = _k[1];
-    var _l = __read((0, react_1.useState)(undefined), 2), optionalCustomFilter = _l[0], setOptionalCustomFilter = _l[1];
-    var _m = __read((_a = props.multilineSwitchValue) !== null && _a !== void 0 ? _a : (0, react_1.useState)(props.multilineSwitchInitValue), 2), multilineSwitchValue = _m[0], setMultilineSwitchValue = _m[1];
-    var _o = __read((0, react_1.useState)(XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _o[0], setMultiSortMeta = _o[1];
-    var _p = __read((0, react_1.useState)(null), 2), selectedRow = _p[0], setSelectedRow = _p[1];
+    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];
     //const [exportRowsDialogRowCount, setExportRowsDialogRowCount] = useState<number>(); // param pre dialog
-    var _s = __read((0, react_1.useState)(filtersInit), 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)(initFtsInputValue), 2), ftsInputValueAfterFiltering = _t[0], setFtsInputValueAfterFiltering = _t[1]; // tak isto ako filtersAfterFiltering
-    var _u = __read((0, react_1.useState)(undefined), 2), optionalCustomFilterAfterFiltering = _u[0], setOptionalCustomFilterAfterFiltering = _u[1]; // tak isto ako filtersAfterFiltering
+    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
     // 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
@@ -341,6 +393,7 @@ var XLazyDataTable = function (props) {
         //console.log("zavolany onFilter - event.filters = " + JSON.stringify(event.filters));
         // tymto zavolanim sa zapise znak zapisany klavesnicou do inputu filtra (ak prikaz zakomentujeme, input filtra zostane prazdny)
         setFilters(event.filters);
+        removePagingFromStorage();
         loadDataBaseIfAutoFilter(event.filters);
     };
     var onSort = function (event) {
@@ -362,16 +415,49 @@ var XLazyDataTable = function (props) {
         //console.log("zavolany onClickFilter");
         loadData();
     };
-    var onClickClearFilter = function () {
-        // najjednoduchsi sposob - pomeni aj pripadne nastavene matchMode hodnoty
-        var filtersInit = createInitFilters();
-        setFilters(filtersInit);
-        if (ftsInputValue) {
-            setFtsInputValue(createInitFtsInputValue());
-        }
-        if (props.optionalCustomFilters) {
-            setOptionalCustomFilter(undefined);
-        }
+    /*  povodna metoda, ktora iba vycistila filter
+        const onClickClearFilter = () => {
+            // najjednoduchsi sposob - pomeni aj pripadne nastavene matchMode hodnoty
+            let filtersInit: DataTableFilterMeta = createFiltersInit();
+            setFilters(filtersInit);
+    
+            if (ftsInputValue) {
+                setFtsInputValue(createInitFtsInputValue());
+            }
+    
+            if (props.optionalCustomFilters) {
+                setOptionalCustomFilter(undefined);
+            }
+        };
+    */
+    var onClickResetTable = function () {
+        // every session state variable set to init value from "props" or default value
+        // (this code corresponds to init values in useXStateSession hooks)
+        var firstLocal = 0;
+        setFirst(firstLocal);
+        var filtersLocal = createFiltersInit();
+        setFilters(filtersLocal);
+        var ftsInputValueLocal = createInitFtsInputValue();
+        setFtsInputValue(ftsInputValueLocal);
+        var optionalCustomFilterLocal = undefined;
+        setOptionalCustomFilter(optionalCustomFilterLocal);
+        setMultilineSwitchValue(props.multilineSwitchInitValue);
+        var multiSortMetaLocal = XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField);
+        setMultiSortMeta(multiSortMetaLocal);
+        setSelectedRow(null);
+        // custom operations
+        if (props.onResetTable) {
+            props.onResetTable();
+        }
+        // at least because of sort change (icon shows sorting column) we have to read data from db right now
+        var findParam = createFindParam();
+        // overwrite first, filters, ... with (potentially) new values
+        findParam.first = firstLocal;
+        findParam.filters = filtersLocal;
+        findParam.fullTextSearch = createXFullTextSearch(ftsInputValueLocal);
+        findParam.customFilterItems = createXCustomFilterItems(customFilterItems, optionalCustomFilterLocal);
+        findParam.multiSortMeta = multiSortMetaLocal;
+        loadDataBase(findParam);
     };
     var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -452,6 +538,8 @@ var XLazyDataTable = function (props) {
                     setValue(findResult);
                     setupExpandedRows(findResult, multilineSwitchValue);
                     setLoading(false);
+                    // save table state into session/local
+                    //saveTableState(findParam); <- old solution, state is saved immediatelly after change of some filter field, sorting, etc.
                     // odlozime si filter hodnoty pre pripadny export - deep cloning vyzera ze netreba
                     setFiltersAfterFiltering(filters);
                     setFtsInputValueAfterFiltering(ftsInputValue ? __assign({}, ftsInputValue) : undefined);
@@ -500,6 +588,13 @@ var XLazyDataTable = function (props) {
             }
         });
     }); };
+    /*
+        const saveTableState = (findParam: FindParam) => {
+            saveValueIntoStorage(XStateKeySuffix.filters, findParam.filters);
+            saveValueIntoStorage(XStateKeySuffix.ftsInputValue, ftsInputValue);
+            saveValueIntoStorage(XStateKeySuffix.optionalCustomFilter, optionalCustomFilter);
+        }
+    */
     var createXFullTextSearch = function (ftsInputValue) {
         var xFullTextSearch = undefined; // default
         if (ftsInputValue && ftsInputValue.value !== null) {
@@ -789,6 +884,7 @@ var XLazyDataTable = function (props) {
         // neskusal som, ci treba aj toto klonovat ale pravdepodobne hej
         var filtersCloned = __assign({}, filters);
         setFilters(filtersCloned);
+        removePagingFromStorage();
         loadDataBaseIfAutoFilter(filtersCloned);
     };
     // vseobecna specialna metodka pouzvana pri custom filtri (XLazyColumn.filterElement)
@@ -807,6 +903,9 @@ var XLazyDataTable = function (props) {
         // treba klonovat, inac react nezobrazi zmenenu hodnotu
         var filtersCloned = __assign({}, filters);
         setFilters(filtersCloned);
+        // we had problem when page was set to e.g. 3 (more than 1), after setting some filter value that caused that only 1 page should be returned
+        // - after returning back to browse no rows were displayed (because requested page was 3) (this is quick fix)
+        removePagingFromStorage();
         loadDataBaseIfAutoFilter(filtersCloned);
     };
     // vseobecna metodka - precita hodnotu z filtra (vrati napr. typ Date | null)
@@ -1256,9 +1355,12 @@ var XLazyDataTable = function (props) {
             props.label ? react_1.default.createElement("div", { className: "x-lazy-datatable-label" }, props.label) : null,
             ftsInputValue ? react_1.default.createElement(XFtsInput_1.XFtsInput, { value: ftsInputValue, onChange: function (value) { return setFtsInputValue(value); } }) : null,
             props.showFilterButtons ? react_1.default.createElement(XButton_1.XButton, { key: "filter", icon: isMobile ? "pi pi-search" : undefined, label: !isMobile ? (0, XLocale_1.xLocaleOption)('filter') : undefined, onClick: onClickFilter }) : null,
-            props.showFilterButtons ? react_1.default.createElement(XButton_1.XButton, { key: "clearFilter", icon: isMobile ? "pi pi-ban" : undefined, label: !isMobile ? (0, XLocale_1.xLocaleOption)('clearFilter') : undefined, onClick: onClickClearFilter }) : null,
+            props.showFilterButtons ? react_1.default.createElement(XButton_1.XButton, { key: "resetTable", icon: isMobile ? "pi pi-ban" : undefined, label: !isMobile ? (0, XLocale_1.xLocaleOption)('resetTable') : undefined, onClick: onClickResetTable }) : null,
             props.optionalCustomFilters ? react_1.default.createElement(XOcfDropdown_1.XOcfDropdown, { optionalCustomFilters: props.optionalCustomFilters, value: optionalCustomFilter, onChange: function (value) { return setOptionalCustomFilter(value); }, className: "m-1" }) : null,
-            props.multilineSwitch ? react_1.default.createElement(XMultilineSwitch_1.XMultilineSwitch, { value: multilineSwitchValue, onChange: function (switchValue) { setMultilineSwitchValue(switchValue); setupExpandedRows(value, switchValue); }, className: "m-1" }) : null,
+            props.multilineSwitch ? react_1.default.createElement(XMultilineSwitch_1.XMultilineSwitch, { value: multilineSwitchValue, onChange: function (switchValue) {
+                    setMultilineSwitchValue(switchValue);
+                    setupExpandedRows(value, switchValue);
+                }, className: "m-1" }) : null,
             props.headerElementRight,
             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" },

package/lib/components/XLazyDataTable/XOcfDropdown.js

@@ -48,6 +48,6 @@ var XOcfDropdown = function (props) {
     // polozku pridavame do kopie zoznamu, lebo inac sa nam "polozka" v props.optionalCustomFilters "mnozi"
     var options = __spreadArray([], __read(props.optionalCustomFilters), false);
     options.splice(0, 0, { label: "" });
-    return (react_1.default.createElement(dropdown_1.Dropdown, { options: options, optionLabel: "label", value: props.value, onChange: onChange, className: props.className }));
+    return (react_1.default.createElement(dropdown_1.Dropdown, { options: options, dataKey: "label", optionLabel: "label", value: props.value, onChange: onChange, className: props.className }));
 };
 exports.XOcfDropdown = XOcfDropdown;

package/lib/components/XLocale.d.ts

@@ -1,6 +1,6 @@
 export interface XLocaleOptions {
     filter?: string;
-    clearFilter?: string;
+    resetTable?: string;
     addRow?: string;
     editRow?: string;
     removeRow?: string;
@@ -21,6 +21,17 @@ export interface XLocaleOptions {
     fileUploadSizeToBig?: string;
     fileUploadFailed?: string;
     fileDownloadFailed?: string;
+    fieldSetSaveEditConfirm?: string;
+    fieldSetCancelEditConfirm?: string;
+    fieldSetRemoveFieldConfirm?: string;
+    runStatisticMissingDateField?: string;
+    upload?: string;
+    yes?: string;
+    no?: string;
+    dateFrom?: string;
+    dateTo?: string;
+    year?: string;
+    yearForAgeCalculation?: string;
 }
 export declare function xAddLocale(locale: string, xOptions: XLocaleOptions): void;
 export declare function xLocaleOption(xOptionKey: string, options?: any[string]): any;

package/lib/components/XUtils.d.ts

@@ -105,4 +105,7 @@ export declare class XUtils {
     static isTableRowInserted(tableRow: any): boolean;
     static xViewStatus(xViewStatusOrBoolean: XViewStatusOrBoolean): XViewStatus;
     static options(valueStringList: string[]): SelectItem[];
+    static saveValueIntoStorage(key: string, value: any): void;
+    static getValueFromStorage(key: string, initValue: any): any;
+    static removeValueFromStorage(key: string): void;
 }

package/lib/components/XUtils.js

@@ -700,6 +700,55 @@ var XUtils = /** @class */ (function () {
     XUtils.options = function (valueStringList) {
         return valueStringList.map(function (valueString) { return { value: valueString, label: valueString }; });
     };
+    XUtils.saveValueIntoStorage = function (key, value) {
+        // value can be also string or null or undefined
+        // if we don't have object that can be serialised to json, we create special object
+        var valueObject;
+        if (typeof value === 'object') {
+            valueObject = value;
+        }
+        else if (value === undefined) {
+            valueObject = { _xValue: "_undefined_" };
+        }
+        else {
+            // value is null or string or boolean or number or Date...
+            valueObject = { _xValue: value };
+        }
+        sessionStorage.setItem(key, XUtilsCommon_1.XUtilsCommon.objectAsJSON(valueObject));
+    };
+    XUtils.getValueFromStorage = function (key, initValue) {
+        // if the value is not found in storage, initValue is returned
+        var value;
+        var item = sessionStorage.getItem(key);
+        if (item !== null) {
+            try {
+                var valueObject = JSON.parse(item);
+                if ('_xValue' in valueObject) {
+                    // we have special object with 1 value
+                    value = valueObject._xValue;
+                    if (value === "_undefined_") {
+                        value = undefined;
+                    }
+                }
+                else {
+                    // standard object
+                    value = valueObject;
+                }
+            }
+            catch (e) {
+                // exception should not happen
+                console.log("XUtils.getValueFromStorage: Could not parse/process item from session. key = ".concat(key, ", item = ").concat(item, ". Error: ").concat(e));
+                value = initValue;
+            }
+        }
+        else {
+            value = initValue;
+        }
+        return value;
+    };
+    XUtils.removeValueFromStorage = function (key) {
+        sessionStorage.removeItem(key);
+    };
     XUtils.dropdownEmptyOptionValue = " ";
     XUtils.xBackendUrl = undefined;
     // nacachovany XToken - na rozlicnych miestach potrebujeme vediet uzivatela

package/lib/components/locale/x-en.json

@@ -1,7 +1,7 @@
 {
     "en": {
         "filter": "Filter",
-        "clearFilter": "Clear filter",
+        "resetTable": "Reset filter",
         "addRow": "Add",
         "editRow": "Edit",
         "removeRow": "Remove",

package/lib/components/useXStateSession.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from "react";
+export declare function useXStateSession<T>(key: string, initialState: T): [T, Dispatch<SetStateAction<T>>];

package/lib/components/useXStateSession.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useXStateSession = void 0;
+var XUtils_1 = require("./XUtils");
+var useXStateSessionBase_1 = require("./useXStateSessionBase");
+// TODO - initialState sholud be value | function returning T, and the function should be called in function "initialStateFunction"
+function useXStateSession(key, initialState) {
+    return (0, useXStateSessionBase_1.useXStateSessionBase)(key, function () { return XUtils_1.XUtils.getValueFromStorage(key, initialState); });
+}
+exports.useXStateSession = useXStateSession;

package/lib/components/useXStateSessionBase.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from "react";
+export declare function useXStateSessionBase<T>(key: string, initialStateFunction: () => T): [T, Dispatch<SetStateAction<T>>];

package/lib/components/useXStateSessionBase.js

@@ -0,0 +1,32 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useXStateSessionBase = void 0;
+var react_1 = require("react");
+var XUtils_1 = require("./XUtils");
+// this base version enables to use custom version of function that computes initialState
+// (in usual case useXStateSession shoud be used)
+function useXStateSessionBase(key, initialStateFunction) {
+    var _a = __read((0, react_1.useState)(initialStateFunction), 2), value = _a[0], setValue = _a[1];
+    var setValueIntoSession = function (value) {
+        setValue(value);
+        XUtils_1.XUtils.saveValueIntoStorage(key, value);
+    };
+    return [value, setValueIntoSession];
+}
+exports.useXStateSessionBase = useXStateSessionBase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.32.5",
+  "version": "1.32.7",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",
@@ -30,8 +30,8 @@
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.202",
     "@types/node": "^18.15.3",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "@types/react-transition-group": "^4.4.5",
     "gulp": "^4.0.2",
     "rimraf": "^4.4.0",
@@ -40,10 +40,10 @@
   "peerDependencies": {
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
-    "primereact": "~10.8.2",
-    "quill": "^2.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "primereact": "10.9.2",
+    "quill": "^2.0.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5"
   },
   "files": [

package/useXStateSession.d.ts

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

package/useXStateSession.js

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