@revolist/revogrid 4.8.1 → 4.8.2

package/hydrate/index.mjs

@@ -2291,6 +2291,7 @@ class Clipboard {
         // if html, then search for table if no table fallback to regular text parsing
         if (beforePaste.detail.isHTML) {
             const table = this.htmlParse(beforePaste.detail.raw);
+            // fallback to text if not possible to parse as html
             parsedData = table || this.textParse(dataText);
         }
         else {
@@ -2420,8 +2421,8 @@ const TrashButton = () => {
         hAsync("svg", { class: "trash-img", viewBox: "0 0 24 24" },
             hAsync("path", { fill: "currentColor", d: "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" }))));
 };
-const AndOrButton = ({ isAnd }) => {
-    return hAsync("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, isAnd ? 'and' : 'or');
+const AndOrButton = ({ text }) => {
+    return hAsync("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, text);
 };
 function isFilterBtn(e) {
     if (e.classList.contains(FILTER_BUTTON_CLASS)) {
@@ -3012,6 +3013,10 @@ class FilterPanel {
             // drops the filter
             reset: 'Cancel',
             cancel: 'Close',
+            add: 'Add more condition...',
+            placeholder: 'Enter value...',
+            and: 'and',
+            or: 'or',
         };
         this.debouncedApplyFilter = debounce_1(() => {
             this.filterChange.emit(this.filterItems);
@@ -3061,7 +3066,8 @@ class FilterPanel {
         const options = [];
         const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
         if (!isDefaultTypeRemoved) {
-            options.push(hAsync("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0 ? 'Add more condition...' : this.filterNames[defaultType]));
+            const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
+            options.push(hAsync("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0 ? capts.add : this.filterNames[defaultType]));
         }
         for (let gIndex in this.filterTypes) {
             options.push(...this.filterTypes[gIndex].map(k => (hAsync("option", { value: k, selected: type === k }, this.filterNames[k]))));
@@ -3075,7 +3081,8 @@ class FilterPanel {
             return '';
         if (this.filterEntities[currentFilter[index].type].extra !== 'input')
             return '';
-        return (hAsync("input", { id: `filter-input-${currentFilter[index].id}`, placeholder: "Enter value...", type: "text", value: currentFilter[index].value, onInput: this.onUserInput.bind(this, index, prop), onKeyDown: e => this.onKeyDown(e) }));
+        const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
+        return (hAsync("input", { id: `filter-input-${currentFilter[index].id}`, placeholder: capts.placeholder, type: "text", value: currentFilter[index].value, onInput: this.onUserInput.bind(this, index, prop), onKeyDown: e => this.onKeyDown(e) }));
     }
     getFilterItemsList() {
         var _a;
@@ -3083,11 +3090,12 @@ class FilterPanel {
         if (!(prop || prop === 0))
             return '';
         const propFilters = this.filterItems[prop] || [];
+        const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
         return (hAsync("div", { key: this.filterId }, propFilters.map((d, index) => {
             let andOrButton;
             // hide toggle button if there is only one filter and the last one
             if (index !== this.filterItems[prop].length - 1) {
-                andOrButton = (hAsync("div", { onClick: () => this.toggleFilterAndOr(d.id) }, hAsync(AndOrButton, { isAnd: d.relation === 'and' })));
+                andOrButton = (hAsync("div", { onClick: () => this.toggleFilterAndOr(d.id) }, hAsync(AndOrButton, { text: d.relation === 'and' ? capts.and : capts.or })));
             }
             return (hAsync("div", { key: d.id, class: FILTER_LIST_CLASS }, hAsync("div", { class: { 'select-input': true } }, hAsync("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)), hAsync("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton), hAsync("div", { onClick: () => this.onRemoveFilter(d.id) }, hAsync(TrashButton, null))), hAsync("div", null, this.renderExtra(prop, index))));
         }), propFilters.length > 0 ? hAsync("div", { class: "add-filter-divider" }) : ''));
@@ -3107,8 +3115,7 @@ class FilterPanel {
     }
     onFilterTypeChange(e, prop, index) {
         const el = e.target;
-        const type = el.value;
-        this.filterItems[prop][index].type = type;
+        this.filterItems[prop][index].type = el.value;
         // this re-renders the input to know if we need extra input
         this.filterId++;
         // adding setTimeout will wait for the next tick DOM update then focus on input
@@ -3122,8 +3129,7 @@ class FilterPanel {
     }
     onAddNewFilter(e) {
         const el = e.target;
-        const type = el.value;
-        this.currentFilterType = type;
+        this.currentFilterType = el.value;
         this.addNewFilterToProp();
         // reset value after adding new filter
         const select = document.getElementById('add-filter');
@@ -7547,6 +7553,7 @@ function defaultState() {
         focus: null,
         edit: null,
         lastCell: null,
+        nextFocus: null,
     };
 }
 class SelectionStore {
@@ -7578,6 +7585,9 @@ class SelectionStore {
             });
         }
     }
+    setNextFocus(focus) {
+        setStore(this.store, { nextFocus: focus });
+    }
     setTempArea(range) {
         setStore(this.store, { tempRange: range === null || range === void 0 ? void 0 : range.area, tempRangeType: range === null || range === void 0 ? void 0 : range.type, edit: null });
     }
@@ -7763,42 +7773,91 @@ class SelectionStoreConnector {
         this.focusByCell(storePos, editCell, editCell);
         this.setEdit('');
     }
+    /**
+     * Sets the next focus cell before the current one.
+     *
+     * @param focus - The cell to set as the next focus.
+     */
+    beforeNextFocusCell(focus) {
+        var _a;
+        // If there is no focused store, return early.
+        if (!this.focusedStore) {
+            return;
+        }
+        // Get the next store based on the current focus and the last cell.
+        const next = this.getNextStore(focus, this.focusedStore.position, this.focusedStore.entity.store.get('lastCell'));
+        // Set the next focus cell in the store.
+        (_a = next.store) === null || _a === void 0 ? void 0 : _a.setNextFocus(Object.assign(Object.assign({}, focus), next.item));
+    }
     focusByCell(storePos, start, end) {
         const store = this.stores[storePos.y][storePos.x];
         this.focus(store, { focus: start, end });
     }
     focus(store, { focus, end }) {
+        const currentStorePointer = this.getCurrentStorePointer(store);
+        if (!currentStorePointer) {
+            return null;
+        }
+        // check for the focus in nearby store/viewport
+        const lastCell = store.store.get('lastCell');
+        const next = this.getNextStore(focus, currentStorePointer, lastCell);
+        // if next store present - update
+        if (next === null || next === void 0 ? void 0 : next.store) {
+            const item = Object.assign(Object.assign({}, focus), next.item);
+            this.focus(next.store, { focus: item, end: item });
+            return null;
+        }
+        focus = cropCellToMax(focus, lastCell);
+        end = cropCellToMax(end, lastCell);
+        store.setFocus(focus, end);
+        return focus;
+    }
+    /**
+     * Retrieves the current store pointer based on the active store.
+     * Clears focus from all stores except the active one.
+     */
+    getCurrentStorePointer(store) {
         let currentStorePointer;
-        // clear all stores focus leave only active one
+        // Iterate through all stores
         for (let y in this.stores) {
             for (let x in this.stores[y]) {
                 const s = this.stores[y][x];
-                // clear other stores, only one area can be selected
+                // Clear focus from stores other than the active one
                 if (s !== store) {
                     s.clearFocus();
                 }
                 else {
-                    currentStorePointer = { x: parseInt(x, 10), y: parseInt(y, 10) };
+                    // Update the current store pointer with the active store coordinates
+                    currentStorePointer = {
+                        x: parseInt(x, 10),
+                        y: parseInt(y, 10)
+                    };
                 }
             }
         }
-        if (!currentStorePointer) {
-            return null;
-        }
-        // check is focus in next store
-        const lastCell = store.store.get('lastCell');
+        return currentStorePointer;
+    }
+    /**
+     * Retrieves the next store based on the focus cell and current store pointer.
+     * If the next store exists, returns an object with the next store and the item in the new store.
+     * If the next store does not exist, returns null.
+     */
+    getNextStore(focus, currentStorePointer, lastCell) {
         // item in new store
         const nextItem = nextCell(focus, lastCell);
-        let nextStore;
+        let nextStore = null;
         if (nextItem) {
             for (let i in nextItem) {
                 let type = i;
                 let stores;
                 switch (type) {
                     case 'x':
+                        // Get the X stores for the current Y coordinate of the current store pointer
                         stores = this.getXStores(currentStorePointer.y);
                         break;
                     case 'y':
+                        // Get the Y stores for the current X coordinate of the current store pointer
+                        stores = this.getYStores(currentStorePointer.x);
                         stores = this.getYStores(currentStorePointer.x);
                         break;
                 }
@@ -7814,16 +7873,10 @@ class SelectionStoreConnector {
                 }
             }
         }
-        // if next store present - update
-        if (nextStore) {
-            let item = Object.assign(Object.assign({}, focus), nextItem);
-            this.focus(nextStore, { focus: item, end: item });
-            return null;
-        }
-        focus = cropCellToMax(focus, lastCell);
-        end = cropCellToMax(end, lastCell);
-        store.setFocus(focus, end);
-        return focus;
+        return {
+            store: nextStore,
+            item: nextItem,
+        };
     }
     clearAll() {
         var _a;
@@ -9137,6 +9190,11 @@ var codesLetter;
     codesLetter["ARROW_DOWN"] = "ArrowDown";
     codesLetter["SHIFT"] = "Shift";
 })(codesLetter || (codesLetter = {}));
+var keyValues;
+(function (keyValues) {
+    keyValues["ENTER"] = "Enter";
+    keyValues["TAB"] = "Tab";
+})(keyValues || (keyValues = {}));
 
 function isTouch(e) {
     return !!e.touches;
@@ -9361,24 +9419,24 @@ function isClear(code) {
 function isTab(code) {
     return codesLetter.TAB === code;
 }
-function isEnterKey(code) {
-    return code === codesLetter.ENTER || code === codesLetter.ENTER_NUM;
+function isEnterKeyValue(key) {
+    return keyValues.ENTER === key;
 }
 function isCut(event) {
-    return (event.ctrlKey && event.code === 'KeyX') || // Ctrl + X on Windows
-        (event.metaKey && event.code === 'KeyX'); // Cmd + X on Mac
+    return ((event.ctrlKey && event.code === 'KeyX') || // Ctrl + X on Windows
+        (event.metaKey && event.code === 'KeyX')); // Cmd + X on Mac
 }
 function isCopy(event) {
-    return (event.ctrlKey && event.code === 'KeyC') || // Ctrl + C on Windows
-        (event.metaKey && event.code === 'KeyC'); // Cmd + C on Mac
+    return ((event.ctrlKey && event.code === 'KeyC') || // Ctrl + C on Windows
+        (event.metaKey && event.code === 'KeyC')); // Cmd + C on Mac
 }
 function isPaste(event) {
-    return (event.ctrlKey && event.code === 'KeyV') || // Ctrl + V on Windows
-        (event.metaKey && event.code === 'KeyV'); // Cmd + V on Mac
+    return ((event.ctrlKey && event.code === 'KeyV') || // Ctrl + V on Windows
+        (event.metaKey && event.code === 'KeyV')); // Cmd + V on Mac
 }
 function isAll(event) {
-    return (event.ctrlKey && event.code === 'KeyA') || // Ctrl + A on Windows
-        (event.metaKey && event.code === 'KeyA'); // Cmd + A on Mac
+    return ((event.ctrlKey && event.code === 'KeyA') || // Ctrl + A on Windows
+        (event.metaKey && event.code === 'KeyA')); // Cmd + A on Mac
 }
 
 /* Generate range on size
@@ -9462,11 +9520,11 @@ class KeyboardService {
         }
         // tab key means same as arrow right
         if (codesLetter.TAB === e.code) {
-            this.keyChangeSelection(e, canRange);
+            await this.keyChangeSelection(e, canRange);
             return;
         }
         // pressed enter
-        if (isEnterKey(e.code)) {
+        if (isEnterKeyValue(e.key)) {
             this.sv.change();
             return;
         }
@@ -9531,15 +9589,19 @@ class KeyboardService {
         if (!data) {
             return false;
         }
+        const eData = this.sv.getData();
         if (isMulti) {
-            const eData = this.sv.getData();
             if (isAfterLast(data.end, eData.lastCell) || isBeforeFirst(data.start)) {
                 return false;
             }
             const range = getRange(data.start, data.end);
             return this.sv.range(range);
         }
-        return this.sv.focusNext(data.start, changes);
+        return this.sv.focus(data.start, changes, isAfterLast(data.start, eData.lastCell)
+            ? 1
+            : isBeforeFirst(data.start)
+                ? -1
+                : 0);
     }
     /** Monitor key direction changes */
     changeDirectionKey(e, canRange) {
@@ -9547,6 +9609,12 @@ class KeyboardService {
         if (DIRECTION_CODES.includes(e.code)) {
             e.preventDefault();
         }
+        if (e.shiftKey) {
+            switch (e.code) {
+                case codesLetter.TAB:
+                    return { changes: { x: -1 }, isMulti: false };
+            }
+        }
         switch (e.code) {
             case codesLetter.ARROW_UP:
                 return { changes: { y: -1 }, isMulti };
@@ -9785,6 +9853,7 @@ class OverlaySelection {
         this.beforeRegionPaste = createEvent(this, "beforepasteregion", 7);
         this.cellEditApply = createEvent(this, "celleditapply", 7);
         this.beforeFocusCell = createEvent(this, "beforecellfocusinit", 7);
+        this.beforeNextViewportFocus = createEvent(this, "beforenextvpfocus", 7);
         this.setEdit = createEvent(this, "setedit", 7);
         this.beforeApplyRange = createEvent(this, "beforeapplyrange", 7);
         this.beforeSetRange = createEvent(this, "beforesetrange", 7);
@@ -9807,6 +9876,7 @@ class OverlaySelection {
         this.keyboardService = null;
         this.autoFillService = null;
         this.revogrEdit = null;
+        this.unsubscribeSelectionStore = [];
         this.readonly = undefined;
         this.range = undefined;
         this.canDrag = undefined;
@@ -9874,12 +9944,26 @@ class OverlaySelection {
         });
     }
     // #endregion
-    /** Selection & Keyboard */
+    /**
+     * Selection & Keyboard
+     */
     selectionServiceSet(s) {
+        // clear subscriptions
+        this.unsubscribeSelectionStore.forEach(v => v());
+        this.unsubscribeSelectionStore.length = 0;
+        this.unsubscribeSelectionStore.push(s.onChange('nextFocus', (v) => this.doFocus(v, v)));
         this.keyboardService = new KeyboardService({
             selectionStore: s,
             range: r => this.triggerRangeEvent(r),
-            focusNext: (f, next) => this.doFocus(f, f, next),
+            focus: (f, changes, focusNextViewport) => {
+                if (focusNextViewport) {
+                    this.beforeNextViewportFocus.emit(f);
+                    return false;
+                }
+                else {
+                    return this.doFocus(f, f, changes);
+                }
+            },
             change: val => {
                 if (this.readonly) {
                     return;
@@ -9926,6 +10010,9 @@ class OverlaySelection {
     }
     disconnectedCallback() {
         var _a;
+        // clear subscriptions
+        this.unsubscribeSelectionStore.forEach(v => v());
+        this.unsubscribeSelectionStore.length = 0;
         (_a = this.columnService) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     async componentWillRender() {
@@ -9994,17 +10081,17 @@ class OverlaySelection {
                 nodes.push(hAsync("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (hAsync(Host, { key: '676c1ac41a3658f7c2cb93ada69fbf141a51c660', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, hAsync("slot", { key: '42f4e051d6f531bd92e22106ca0eb1808068e8d0', name: "data" })));
+        return (hAsync(Host, { key: '81dee4cfcce410cefb2bd9ff2661261472fc3a75', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, hAsync("slot", { key: '6ac75c388ae3fbc5539a27c3acd58178dd53d1af', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
      */
-    doFocus(focus, end, next) {
+    doFocus(focus, end, changes) {
         const { defaultPrevented } = this.beforeFocusCell.emit(this.columnService.getSaveData(focus.y, focus.x));
         if (defaultPrevented) {
             return false;
         }
-        const evData = Object.assign({ range: Object.assign(Object.assign({}, focus), { x1: end.x, y1: end.y }), next }, this.types);
+        const evData = Object.assign({ range: Object.assign(Object.assign({}, focus), { x1: end.x, y1: end.y }), next: changes }, this.types);
         const applyEvent = this.applyFocus.emit(evData);
         if (applyEvent.defaultPrevented) {
             return false;
@@ -10274,8 +10361,8 @@ class TextEditor {
         }
     }
     onKeyDown(e) {
-        const isEnter = isEnterKey(e.code);
-        const isKeyTab = isTab(e.code);
+        const isEnter = isEnterKeyValue(e.key);
+        const isKeyTab = isTab(e.key);
         if ((isKeyTab || isEnter) &&
             e.target &&
             this.saveCallback &&
@@ -10312,6 +10399,7 @@ class TextEditor {
         var _a;
         return h('input', {
             type: 'text',
+            enterKeyHint: 'enter',
             // set input value from cell data
             value: ((_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) || '',
             // save input element as ref for further usage
@@ -11713,7 +11801,12 @@ class FilterPlugin extends BasePlugin {
         const buttonPos = el.getBoundingClientRect();
         const prop = e.detail.prop;
         this.pop.filterTypes = this.getColumnFilter(e.detail.filter);
-        this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, prop }));
+        this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: -9999, y: buttonPos.y - gridPos.y + buttonPos.height, prop }));
+        // fix filter dialog is out of view
+        setTimeout(async () => {
+            const { width } = this.pop.getBoundingClientRect();
+            this.pop.style.left = Math.min(buttonPos.x - gridPos.x, gridPos.width - width - 20) + 'px';
+        });
     }
     getColumnFilter(type) {
         let filterType = 'string';
@@ -11778,7 +11871,7 @@ class FilterPlugin extends BasePlugin {
         }
         // applies the hasFilter to the columns to show filter icon
         await this.revogrid.updateColumns(columnsToUpdate);
-        this.emit('afterFilterApply');
+        this.emit('afterfilterapply');
     }
     async clearFiltering() {
         this.multiFilterItems = {};
@@ -14741,7 +14834,7 @@ class RevoGridComponent {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (hAsync("revogr-overlay-selection", Object.assign({}, data, { isMobileDevice: isMobile, selectionStore: data.segmentSelectionStore, onSelectall: () => this.selectionStoreConnector.selectAll(), editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onCanceledit: () => this.selectionStoreConnector.setEdit(false), onSetedit: ({ detail }) => {
+                const dataView = (hAsync("revogr-overlay-selection", Object.assign({}, data, { isMobileDevice: isMobile, selectionStore: data.segmentSelectionStore, onSelectall: () => this.selectionStoreConnector.selectAll(), editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => this.selectionStoreConnector.beforeNextFocusCell(e.detail), onCanceledit: () => this.selectionStoreConnector.setEdit(false), onSetedit: ({ detail }) => {
                         const event = this.beforeeditstart.emit(detail);
                         if (!event.defaultPrevented) {
                             this.selectionStoreConnector.setEdit(detail.val);
@@ -14758,11 +14851,11 @@ class RevoGridComponent {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (hAsync(Host, { key: '09af373e244a347c42e7f432ec8814ba3dbd9169', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: '1ba5db255ea939bef4cef307abf5933d3727e828', class: "main-viewport", onClick: (e) => {
+        return (hAsync(Host, { key: '9c290a3e6cff0f2e2375f98e020292646dc51ac6', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: '48417bd11ec1eae854bcc0be942a7e4d27b630ac', class: "main-viewport", onClick: (e) => {
                 if (e.currentTarget === e.target) {
                     this.viewport.clearEdit();
                 }
-            } }, hAsync("div", { key: 'e98b55cf7736922791256b9c2b04e8dc5a8ec06b', class: "viewports" }, hAsync("slot", { key: '079f088ea130397be68864c4beeba8be4552b58d', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: 'a37ef654eac58654c71f0b9e772d3915f0793aa9', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { key: 'db366dd88f50f54f650aece77502ba415cb14e48', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: '2030e23241ccfc74895e02d6bd2733244a909ff6', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
+            } }, hAsync("div", { key: '870bb866b39ecdd7af06a0a265891adf76c0a736', class: "viewports" }, hAsync("slot", { key: '6a8b432762f85064e190ead625168913cd610d09', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: '39d6c67a2910f411131bc433441219eb5ddaafa2', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { key: '5b0c5d2864da2b7fab55ca0709e5b1250e22db5f', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: 'fde782c69924d2a4d1ba5e538da28ca64e8ac292', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
     }
     disconnectedCallback() {
         // Remove all plugins, to avoid memory leaks and unexpected behaviour when the component is removed
@@ -15146,7 +15239,7 @@ class RevogrData {
             this.beforerowrender.emit({
                 node: row,
                 item: rgRow,
-                dataItem,
+                model: dataItem,
                 colType: this.columnService.type,
                 rowType: this.type,
             });
@@ -15583,11 +15676,12 @@ var keyBy = createAggregator(function(result, value, key) {
 var keyBy_1 = keyBy;
 
 const SortingSign = ({ column }) => {
-    return hAsync("i", { class: column.order });
+    var _a;
+    return hAsync("i", { class: (_a = column === null || column === void 0 ? void 0 : column.order) !== null && _a !== void 0 ? _a : 'sort-off' });
 };
 
 const HeaderRenderer = (p) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const cellClass = {
         [HEADER_CLASS]: true,
         [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
@@ -15622,8 +15716,8 @@ const HeaderRenderer = (p) => {
         }
     }
     return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData },
-        ((_e = p.data) === null || _e === void 0 ? void 0 : _e.order) ? hAsync(SortingSign, { column: p.data }) : '',
-        p.canFilter && ((_f = p.data) === null || _f === void 0 ? void 0 : _f.filter) !== false ? hAsync(FilterButton, { column: p.data }) : ''));
+        hAsync(SortingSign, { column: p.data }),
+        p.canFilter && ((_e = p.data) === null || _e === void 0 ? void 0 : _e.filter) !== false ? hAsync(FilterButton, { column: p.data }) : ''));
 };
 
 const GroupHeaderRenderer = (p) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.8.1",
+  "version": "4.8.2",
   "type": "module",
   "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",

package/standalone/column.service.js

@@ -19,6 +19,7 @@ function defaultState() {
         focus: null,
         edit: null,
         lastCell: null,
+        nextFocus: null,
     };
 }
 class SelectionStore {
@@ -50,6 +51,9 @@ class SelectionStore {
             });
         }
     }
+    setNextFocus(focus) {
+        setStore(this.store, { nextFocus: focus });
+    }
     setTempArea(range) {
         setStore(this.store, { tempRange: range === null || range === void 0 ? void 0 : range.area, tempRangeType: range === null || range === void 0 ? void 0 : range.type, edit: null });
     }
@@ -235,42 +239,91 @@ class SelectionStoreConnector {
         this.focusByCell(storePos, editCell, editCell);
         this.setEdit('');
     }
+    /**
+     * Sets the next focus cell before the current one.
+     *
+     * @param focus - The cell to set as the next focus.
+     */
+    beforeNextFocusCell(focus) {
+        var _a;
+        // If there is no focused store, return early.
+        if (!this.focusedStore) {
+            return;
+        }
+        // Get the next store based on the current focus and the last cell.
+        const next = this.getNextStore(focus, this.focusedStore.position, this.focusedStore.entity.store.get('lastCell'));
+        // Set the next focus cell in the store.
+        (_a = next.store) === null || _a === void 0 ? void 0 : _a.setNextFocus(Object.assign(Object.assign({}, focus), next.item));
+    }
     focusByCell(storePos, start, end) {
         const store = this.stores[storePos.y][storePos.x];
         this.focus(store, { focus: start, end });
     }
     focus(store, { focus, end }) {
+        const currentStorePointer = this.getCurrentStorePointer(store);
+        if (!currentStorePointer) {
+            return null;
+        }
+        // check for the focus in nearby store/viewport
+        const lastCell = store.store.get('lastCell');
+        const next = this.getNextStore(focus, currentStorePointer, lastCell);
+        // if next store present - update
+        if (next === null || next === void 0 ? void 0 : next.store) {
+            const item = Object.assign(Object.assign({}, focus), next.item);
+            this.focus(next.store, { focus: item, end: item });
+            return null;
+        }
+        focus = cropCellToMax(focus, lastCell);
+        end = cropCellToMax(end, lastCell);
+        store.setFocus(focus, end);
+        return focus;
+    }
+    /**
+     * Retrieves the current store pointer based on the active store.
+     * Clears focus from all stores except the active one.
+     */
+    getCurrentStorePointer(store) {
         let currentStorePointer;
-        // clear all stores focus leave only active one
+        // Iterate through all stores
         for (let y in this.stores) {
             for (let x in this.stores[y]) {
                 const s = this.stores[y][x];
-                // clear other stores, only one area can be selected
+                // Clear focus from stores other than the active one
                 if (s !== store) {
                     s.clearFocus();
                 }
                 else {
-                    currentStorePointer = { x: parseInt(x, 10), y: parseInt(y, 10) };
+                    // Update the current store pointer with the active store coordinates
+                    currentStorePointer = {
+                        x: parseInt(x, 10),
+                        y: parseInt(y, 10)
+                    };
                 }
             }
         }
-        if (!currentStorePointer) {
-            return null;
-        }
-        // check is focus in next store
-        const lastCell = store.store.get('lastCell');
+        return currentStorePointer;
+    }
+    /**
+     * Retrieves the next store based on the focus cell and current store pointer.
+     * If the next store exists, returns an object with the next store and the item in the new store.
+     * If the next store does not exist, returns null.
+     */
+    getNextStore(focus, currentStorePointer, lastCell) {
         // item in new store
         const nextItem = nextCell(focus, lastCell);
-        let nextStore;
+        let nextStore = null;
         if (nextItem) {
             for (let i in nextItem) {
                 let type = i;
                 let stores;
                 switch (type) {
                     case 'x':
+                        // Get the X stores for the current Y coordinate of the current store pointer
                         stores = this.getXStores(currentStorePointer.y);
                         break;
                     case 'y':
+                        // Get the Y stores for the current X coordinate of the current store pointer
+                        stores = this.getYStores(currentStorePointer.x);
                         stores = this.getYStores(currentStorePointer.x);
                         break;
                 }
@@ -286,16 +339,10 @@ class SelectionStoreConnector {
                 }
             }
         }
-        // if next store present - update
-        if (nextStore) {
-            let item = Object.assign(Object.assign({}, focus), nextItem);
-            this.focus(nextStore, { focus: item, end: item });
-            return null;
-        }
-        focus = cropCellToMax(focus, lastCell);
-        end = cropCellToMax(end, lastCell);
-        store.setFocus(focus, end);
-        return focus;
+        return {
+            store: nextStore,
+            item: nextItem,
+        };
     }
     clearAll() {
         var _a;