@revolist/revogrid 3.7.2 → 3.7.4

package/custom-element/columnService.js

@@ -194,6 +194,7 @@ function defaultState() {
     tempRange: null,
     tempRangeType: null,
     focus: null,
+    nextFocus: null,
     edit: null,
     lastCell: null,
   };
@@ -222,6 +223,9 @@ class SelectionStore {
       tempRange: null,
     });
   }
+  nextFocus(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 });
   }
@@ -383,29 +387,17 @@ class SelectionStoreConnector {
     this.focus(store, { focus: editCell, end: editCell });
     this.setEdit('');
   }
-  focus(store, { focus, end }) {
-    let currentStorePointer;
-    // clear all stores focus leave only active one
-    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
-        if (s !== store) {
-          s.clearFocus();
-        }
-        else {
-          currentStorePointer = { x: parseInt(x, 10), y: parseInt(y, 10) };
-        }
-      }
-    }
-    if (!currentStorePointer) {
+  beforeNextFocusCell(focus) {
+    if (!this.focusedStore) {
       return;
     }
-    // check is focus in next store
-    const lastCell = store.store.get('lastCell');
+    const nextStore = this.checkNextStore(focus, this.focusedStore.position, this.focusedStore.entity.store.get('lastCell'));
+    nextStore.store.nextFocus(Object.assign(Object.assign({}, focus), nextStore.item));
+  }
+  checkNextStore(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;
@@ -430,10 +422,40 @@ class SelectionStoreConnector {
         }
       }
     }
+    return {
+      store: nextStore,
+      item: nextItem,
+    };
+  }
+  getCurrentStorePointer(store) {
+    let currentStorePointer;
+    // clear all stores focus leave only active one
+    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
+        if (s !== store) {
+          s.clearFocus();
+        }
+        else {
+          currentStorePointer = { x: parseInt(x, 10), y: parseInt(y, 10) };
+        }
+      }
+    }
+    return currentStorePointer;
+  }
+  focus(store, { focus, end }) {
+    const currentStorePointer = this.getCurrentStorePointer(store);
+    if (!currentStorePointer) {
+      return;
+    }
+    // check is focus in next store
+    const lastCell = store.store.get('lastCell');
+    const next = this.checkNextStore(focus, currentStorePointer, lastCell);
     // if next store present - update
-    if (nextStore) {
-      let item = Object.assign(Object.assign({}, focus), nextItem);
-      this.focus(nextStore, { focus: item, end: item });
+    if (next === null || next === void 0 ? void 0 : next.store) {
+      let item = Object.assign(Object.assign({}, focus), next.item);
+      this.focus(next.store, { focus: item, end: item });
       return;
     }
     focus = cropCellToMax(focus, lastCell);

package/custom-element/revo-grid.js

@@ -3361,6 +3361,9 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       e.preventDefault();
     }
   }
+  onCellStoreFocus(e) {
+    this.selectionStoreConnector.beforeNextFocusCell(e.detail);
+  }
   columnChanged(newVal = []) {
     this.dimensionProvider.dropColumns();
     const columnGather = ColumnDataProvider.getColumns(newVal, 0, this.columnTypes);
@@ -3620,7 +3623,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "getPlugins": [64],
     "getFocused": [64],
     "getSelectedRange": [64]
-  }, [[0, "internalRowDragStart", "onRowDragStarted"], [0, "internalRowDragEnd", "onRowDragEnd"], [0, "internalRowDrag", "onRowDrag"], [0, "internalRowMouseMove", "onRowMouseMove"], [0, "internalCellEdit", "onBeforeEdit"], [0, "internalRangeDataApply", "onBeforeRangeEdit"], [0, "internalSelectionChanged", "onRangeChanged"], [0, "initialRowDropped", "onRowDropped"], [0, "initialHeaderClick", "onHeaderClick"], [0, "internalFocusCell", "onCellFocus"]]]);
+  }, [[0, "internalRowDragStart", "onRowDragStarted"], [0, "internalRowDragEnd", "onRowDragEnd"], [0, "internalRowDrag", "onRowDrag"], [0, "internalRowMouseMove", "onRowMouseMove"], [0, "internalCellEdit", "onBeforeEdit"], [0, "internalRangeDataApply", "onBeforeRangeEdit"], [0, "internalSelectionChanged", "onRangeChanged"], [0, "initialRowDropped", "onRowDropped"], [0, "initialHeaderClick", "onHeaderClick"], [0, "internalFocusCell", "onCellFocus"], [0, "internalNextStoreFocus", "onCellStoreFocus"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/custom-element/revogr-data2.js

@@ -69,6 +69,7 @@ const RevogrData = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.dragStartCell = createEvent(this, "dragStartCell", 7);
+    this.beforerowrender = createEvent(this, "beforerowrender", 7);
   }
   onStoreChange() {
     var _a;
@@ -109,7 +110,9 @@ const RevogrData = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       for (let rgCol of cols) {
         cells.push(this.getCellRenderer(rgRow, rgCol, this.canDrag, /** grouping apply*/ this.columnService.hasGrouping ? depth : 0));
       }
-      rowsEls.push(h(RowRenderer, { rowClass: rowClass, size: rgRow.size, start: rgRow.start }, cells));
+      const row = h(RowRenderer, { rowClass: rowClass, size: rgRow.size, start: rgRow.start }, cells);
+      this.beforerowrender.emit({ row, model: dataRow, rowIndex: rgRow.itemIndex });
+      rowsEls.push(row);
     }
     return rowsEls;
   }

package/custom-element/revogr-overlay-selection2.js

@@ -30,7 +30,7 @@ class SelectionStoreService {
   changeRange(range) {
     return this.config.changeRange(range);
   }
-  focus(cell, isMulti = false) {
+  focus(cell, isMulti = false, focusNextStore = 0) {
     if (!cell) {
       return false;
     }
@@ -43,7 +43,7 @@ class SelectionStoreService {
       }
     }
     // single focus
-    return this.config.focus(cell, end);
+    return this.config.focus(cell, end, focusNextStore);
   }
 }
 
@@ -137,7 +137,7 @@ class KeyboardService {
       const range = getRange(data.start, data.end);
       return this.sv.selectionStoreService.changeRange(range);
     }
-    return this.sv.selectionStoreService.focus(data.start);
+    return this.sv.selectionStoreService.focus(data.start, false, isAfterLast(data.start, eData) ? 1 : isBeforeFirst(data.start) ? -1 : 0);
   }
   keyUp(e) {
     if (isCtrlKey(e.keyCode, navigator.platform)) {
@@ -162,6 +162,12 @@ class KeyboardService {
         e.preventDefault();
         break;
     }
+    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 };
@@ -457,6 +463,7 @@ const OverlaySelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.internalPaste = createEvent(this, "internalPaste", 7);
     this.internalCellEdit = createEvent(this, "internalCellEdit", 7);
     this.internalFocusCell = createEvent(this, "internalFocusCell", 7);
+    this.internalNextStoreFocus = createEvent(this, "internalNextStoreFocus", 7);
     this.setEdit = createEvent(this, "setEdit", 3);
     this.cancelEdit = createEvent(this, "cancelEdit", 7);
     this.setRange = createEvent(this, "setRange", 7);
@@ -467,6 +474,8 @@ const OverlaySelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.keyboardService = null;
     this.autoFillService = null;
     this.clipboardService = null;
+    /** Create selection store */
+    this.unsubscribeSelectionStore = [];
   }
   // --------------------------------------------------------------------------
   //
@@ -504,18 +513,31 @@ const OverlaySelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
     (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyDown(e, this.range);
   }
-  /** Create selection store */
+  focusCurrent(cell, end) {
+    var _a;
+    const currentFocusEvent = this.internalFocusCell.emit(this.columnService.getSaveData(cell.y, cell.x));
+    if (currentFocusEvent.defaultPrevented) {
+      return false;
+    }
+    const focused = { focus: cell, end };
+    return !((_a = this.focusCell.emit(focused)) === null || _a === void 0 ? void 0 : _a.defaultPrevented);
+  }
   selectionServiceSet(s) {
+    this.unsubscribeSelectionStore.forEach(v => v());
+    this.unsubscribeSelectionStore = [];
+    this.unsubscribeSelectionStore.push(s.onChange('nextFocus', (v) => {
+      this.focusCurrent(v, v);
+    }));
     this.selectionStoreService = new SelectionStoreService(s, {
       changeRange: range => { var _a; return !((_a = this.setRange.emit(range)) === null || _a === void 0 ? void 0 : _a.defaultPrevented); },
-      focus: (focus, end) => {
-        var _a;
-        const focused = { focus, end };
-        const { defaultPrevented } = this.internalFocusCell.emit(this.columnService.getSaveData(focus.y, focus.x));
-        if (defaultPrevented) {
+      focus: (focus, end, focusNextStore) => {
+        if (!focusNextStore) {
+          return this.focusCurrent(focus, end);
+        }
+        else {
+          this.internalNextStoreFocus.emit(focus);
           return false;
         }
-        return !((_a = this.focusCell.emit(focused)) === null || _a === void 0 ? void 0 : _a.defaultPrevented);
       },
     });
     this.keyboardService = new KeyboardService({
@@ -567,6 +589,8 @@ const OverlaySelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   disconnectedCallback() {
     var _a;
     (_a = this.columnService) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.unsubscribeSelectionStore.forEach(v => v());
+    this.unsubscribeSelectionStore = [];
   }
   renderRange(range) {
     const style = getElStyle(range, this.dimensionRow.state, this.dimensionCol.state);

package/dist/cjs/loader.cjs.js

@@ -31,7 +31,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["revogr-clipboard.cjs",[[0,"revogr-clipboard",{"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"]]]]],["revogr-filter-panel.cjs",[[0,"revogr-filter-panel",{"uuid":[1537],"filterItems":[16],"filterTypes":[16],"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revo-grid_11.cjs",[[0,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"plugins":[16],"columnTypes":[16],"theme":[1537],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"extraElements":[32],"refresh":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"registerVNode":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getSelectedRange":[64]},[[0,"internalRowDragStart","onRowDragStarted"],[0,"internalRowDragEnd","onRowDragEnd"],[0,"internalRowDrag","onRowDrag"],[0,"internalRowMouseMove","onRowMouseMove"],[0,"internalCellEdit","onBeforeEdit"],[0,"internalRangeDataApply","onBeforeRangeEdit"],[0,"internalSelectionChanged","onRangeChanged"],[0,"initialRowDropped","onRowDropped"],[0,"initialHeaderClick","onHeaderClick"],[0,"internalFocusCell","onCellFocus"]]],[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"uiid":[1],"resize":[4],"rowHeaderColumn":[16]}],[4,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16]},[[5,"mousemove","onMouseMove"],[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"],[0,"dragStartCell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]]],[0,"revogr-focus",{"dataStore":[16],"colData":[16],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-scroll-virtual",{"dimension":[1],"viewportStore":[16],"dimensionStore":[16],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-data",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"rowClass":[1,"row-class"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16]}],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"parent":[1],"groups":[16],"groupingDepth":[2,"grouping-depth"],"canResize":[4,"can-resize"],"colData":[16],"columnFilter":[4,"column-filter"]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"dragStart":[64],"endOrder":[64],"clearOrder":[64]},[[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"]]],[4,"revogr-viewport-scroll",{"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"setScroll":[64],"changeScroll":[64]}]]]], options);
+  return index.bootstrapLazy([["revogr-clipboard.cjs",[[0,"revogr-clipboard",{"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"]]]]],["revogr-filter-panel.cjs",[[0,"revogr-filter-panel",{"uuid":[1537],"filterItems":[16],"filterTypes":[16],"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revo-grid_11.cjs",[[0,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"plugins":[16],"columnTypes":[16],"theme":[1537],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"extraElements":[32],"refresh":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"registerVNode":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getSelectedRange":[64]},[[0,"internalRowDragStart","onRowDragStarted"],[0,"internalRowDragEnd","onRowDragEnd"],[0,"internalRowDrag","onRowDrag"],[0,"internalRowMouseMove","onRowMouseMove"],[0,"internalCellEdit","onBeforeEdit"],[0,"internalRangeDataApply","onBeforeRangeEdit"],[0,"internalSelectionChanged","onRangeChanged"],[0,"initialRowDropped","onRowDropped"],[0,"initialHeaderClick","onHeaderClick"],[0,"internalFocusCell","onCellFocus"],[0,"internalNextStoreFocus","onCellStoreFocus"]]],[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"uiid":[1],"resize":[4],"rowHeaderColumn":[16]}],[4,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16]},[[5,"mousemove","onMouseMove"],[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"],[0,"dragStartCell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]]],[0,"revogr-focus",{"dataStore":[16],"colData":[16],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-scroll-virtual",{"dimension":[1],"viewportStore":[16],"dimensionStore":[16],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-data",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"rowClass":[1,"row-class"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16]}],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"parent":[1],"groups":[16],"groupingDepth":[2,"grouping-depth"],"canResize":[4,"can-resize"],"colData":[16],"columnFilter":[4,"column-filter"]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"dragStart":[64],"endOrder":[64],"clearOrder":[64]},[[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"]]],[4,"revogr-viewport-scroll",{"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"setScroll":[64],"changeScroll":[64]}]]]], options);
   });
 };
 

package/dist/cjs/revo-grid.cjs.js

@@ -75,5 +75,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["revogr-clipboard.cjs",[[0,"revogr-clipboard",{"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"]]]]],["revogr-filter-panel.cjs",[[0,"revogr-filter-panel",{"uuid":[1537],"filterItems":[16],"filterTypes":[16],"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revo-grid_11.cjs",[[0,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"plugins":[16],"columnTypes":[16],"theme":[1537],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"extraElements":[32],"refresh":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"registerVNode":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getSelectedRange":[64]},[[0,"internalRowDragStart","onRowDragStarted"],[0,"internalRowDragEnd","onRowDragEnd"],[0,"internalRowDrag","onRowDrag"],[0,"internalRowMouseMove","onRowMouseMove"],[0,"internalCellEdit","onBeforeEdit"],[0,"internalRangeDataApply","onBeforeRangeEdit"],[0,"internalSelectionChanged","onRangeChanged"],[0,"initialRowDropped","onRowDropped"],[0,"initialHeaderClick","onHeaderClick"],[0,"internalFocusCell","onCellFocus"]]],[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"uiid":[1],"resize":[4],"rowHeaderColumn":[16]}],[4,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16]},[[5,"mousemove","onMouseMove"],[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"],[0,"dragStartCell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]]],[0,"revogr-focus",{"dataStore":[16],"colData":[16],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-scroll-virtual",{"dimension":[1],"viewportStore":[16],"dimensionStore":[16],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-data",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"rowClass":[1,"row-class"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16]}],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"parent":[1],"groups":[16],"groupingDepth":[2,"grouping-depth"],"canResize":[4,"can-resize"],"colData":[16],"columnFilter":[4,"column-filter"]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"dragStart":[64],"endOrder":[64],"clearOrder":[64]},[[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"]]],[4,"revogr-viewport-scroll",{"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"setScroll":[64],"changeScroll":[64]}]]]], options);
+  return index.bootstrapLazy([["revogr-clipboard.cjs",[[0,"revogr-clipboard",{"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"]]]]],["revogr-filter-panel.cjs",[[0,"revogr-filter-panel",{"uuid":[1537],"filterItems":[16],"filterTypes":[16],"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revo-grid_11.cjs",[[0,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"plugins":[16],"columnTypes":[16],"theme":[1537],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"extraElements":[32],"refresh":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"registerVNode":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getSelectedRange":[64]},[[0,"internalRowDragStart","onRowDragStarted"],[0,"internalRowDragEnd","onRowDragEnd"],[0,"internalRowDrag","onRowDrag"],[0,"internalRowMouseMove","onRowMouseMove"],[0,"internalCellEdit","onBeforeEdit"],[0,"internalRangeDataApply","onBeforeRangeEdit"],[0,"internalSelectionChanged","onRangeChanged"],[0,"initialRowDropped","onRowDropped"],[0,"initialHeaderClick","onHeaderClick"],[0,"internalFocusCell","onCellFocus"],[0,"internalNextStoreFocus","onCellStoreFocus"]]],[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"uiid":[1],"resize":[4],"rowHeaderColumn":[16]}],[4,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16]},[[5,"mousemove","onMouseMove"],[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"],[0,"dragStartCell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]]],[0,"revogr-focus",{"dataStore":[16],"colData":[16],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-scroll-virtual",{"dimension":[1],"viewportStore":[16],"dimensionStore":[16],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-data",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"rowClass":[1,"row-class"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16]}],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"parent":[1],"groups":[16],"groupingDepth":[2,"grouping-depth"],"canResize":[4,"can-resize"],"colData":[16],"columnFilter":[4,"column-filter"]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"dragStart":[64],"endOrder":[64],"clearOrder":[64]},[[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"]]],[4,"revogr-viewport-scroll",{"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"setScroll":[64],"changeScroll":[64]}]]]], options);
 });

package/dist/cjs/revo-grid_11.cjs.entry.js

@@ -6848,6 +6848,7 @@ function defaultState() {
     tempRange: null,
     tempRangeType: null,
     focus: null,
+    nextFocus: null,
     edit: null,
     lastCell: null,
   };
@@ -6876,6 +6877,9 @@ class SelectionStore {
       tempRange: null,
     });
   }
+  nextFocus(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 });
   }
@@ -7037,29 +7041,17 @@ class SelectionStoreConnector {
     this.focus(store, { focus: editCell, end: editCell });
     this.setEdit('');
   }
-  focus(store, { focus, end }) {
-    let currentStorePointer;
-    // clear all stores focus leave only active one
-    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
-        if (s !== store) {
-          s.clearFocus();
-        }
-        else {
-          currentStorePointer = { x: parseInt(x, 10), y: parseInt(y, 10) };
-        }
-      }
-    }
-    if (!currentStorePointer) {
+  beforeNextFocusCell(focus) {
+    if (!this.focusedStore) {
       return;
     }
-    // check is focus in next store
-    const lastCell = store.store.get('lastCell');
+    const nextStore = this.checkNextStore(focus, this.focusedStore.position, this.focusedStore.entity.store.get('lastCell'));
+    nextStore.store.nextFocus(Object.assign(Object.assign({}, focus), nextStore.item));
+  }
+  checkNextStore(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;
@@ -7084,10 +7076,40 @@ class SelectionStoreConnector {
         }
       }
     }
+    return {
+      store: nextStore,
+      item: nextItem,
+    };
+  }
+  getCurrentStorePointer(store) {
+    let currentStorePointer;
+    // clear all stores focus leave only active one
+    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
+        if (s !== store) {
+          s.clearFocus();
+        }
+        else {
+          currentStorePointer = { x: parseInt(x, 10), y: parseInt(y, 10) };
+        }
+      }
+    }
+    return currentStorePointer;
+  }
+  focus(store, { focus, end }) {
+    const currentStorePointer = this.getCurrentStorePointer(store);
+    if (!currentStorePointer) {
+      return;
+    }
+    // check is focus in next store
+    const lastCell = store.store.get('lastCell');
+    const next = this.checkNextStore(focus, currentStorePointer, lastCell);
     // if next store present - update
-    if (nextStore) {
-      let item = Object.assign(Object.assign({}, focus), nextItem);
-      this.focus(nextStore, { focus: item, end: item });
+    if (next === null || next === void 0 ? void 0 : next.store) {
+      let item = Object.assign(Object.assign({}, focus), next.item);
+      this.focus(next.store, { focus: item, end: item });
       return;
     }
     focus = cropCellToMax(focus, lastCell);
@@ -25306,6 +25328,9 @@ const RevoGridComponent = class {
       e.preventDefault();
     }
   }
+  onCellStoreFocus(e) {
+    this.selectionStoreConnector.beforeNextFocusCell(e.detail);
+  }
   columnChanged(newVal = []) {
     this.dimensionProvider.dropColumns();
     const columnGather = ColumnDataProvider.getColumns(newVal, 0, this.columnTypes);
@@ -25820,6 +25845,7 @@ const RevogrData = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.dragStartCell = index.createEvent(this, "dragStartCell", 7);
+    this.beforerowrender = index.createEvent(this, "beforerowrender", 7);
   }
   onStoreChange() {
     var _a;
@@ -25860,7 +25886,9 @@ const RevogrData = class {
       for (let rgCol of cols) {
         cells.push(this.getCellRenderer(rgRow, rgCol, this.canDrag, /** grouping apply*/ this.columnService.hasGrouping ? depth : 0));
       }
-      rowsEls.push(index.h(RowRenderer, { rowClass: rowClass, size: rgRow.size, start: rgRow.start }, cells));
+      const row = index.h(RowRenderer, { rowClass: rowClass, size: rgRow.size, start: rgRow.start }, cells);
+      this.beforerowrender.emit({ row, model: dataRow, rowIndex: rgRow.itemIndex });
+      rowsEls.push(row);
     }
     return rowsEls;
   }
@@ -27078,7 +27106,7 @@ class SelectionStoreService {
   changeRange(range) {
     return this.config.changeRange(range);
   }
-  focus(cell, isMulti = false) {
+  focus(cell, isMulti = false, focusNextStore = 0) {
     if (!cell) {
       return false;
     }
@@ -27091,7 +27119,7 @@ class SelectionStoreService {
       }
     }
     // single focus
-    return this.config.focus(cell, end);
+    return this.config.focus(cell, end, focusNextStore);
   }
 }
 
@@ -27185,7 +27213,7 @@ class KeyboardService {
       const range = getRange(data.start, data.end);
       return this.sv.selectionStoreService.changeRange(range);
     }
-    return this.sv.selectionStoreService.focus(data.start);
+    return this.sv.selectionStoreService.focus(data.start, false, isAfterLast(data.start, eData) ? 1 : isBeforeFirst(data.start) ? -1 : 0);
   }
   keyUp(e) {
     if (isCtrlKey(e.keyCode, navigator.platform)) {
@@ -27210,6 +27238,12 @@ class KeyboardService {
         e.preventDefault();
         break;
     }
+    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 };
@@ -27504,6 +27538,7 @@ const OverlaySelection = class {
     this.internalPaste = index.createEvent(this, "internalPaste", 7);
     this.internalCellEdit = index.createEvent(this, "internalCellEdit", 7);
     this.internalFocusCell = index.createEvent(this, "internalFocusCell", 7);
+    this.internalNextStoreFocus = index.createEvent(this, "internalNextStoreFocus", 7);
     this.setEdit = index.createEvent(this, "setEdit", 3);
     this.cancelEdit = index.createEvent(this, "cancelEdit", 7);
     this.setRange = index.createEvent(this, "setRange", 7);
@@ -27514,6 +27549,8 @@ const OverlaySelection = class {
     this.keyboardService = null;
     this.autoFillService = null;
     this.clipboardService = null;
+    /** Create selection store */
+    this.unsubscribeSelectionStore = [];
   }
   // --------------------------------------------------------------------------
   //
@@ -27551,18 +27588,31 @@ const OverlaySelection = class {
     }
     (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyDown(e, this.range);
   }
-  /** Create selection store */
+  focusCurrent(cell, end) {
+    var _a;
+    const currentFocusEvent = this.internalFocusCell.emit(this.columnService.getSaveData(cell.y, cell.x));
+    if (currentFocusEvent.defaultPrevented) {
+      return false;
+    }
+    const focused = { focus: cell, end };
+    return !((_a = this.focusCell.emit(focused)) === null || _a === void 0 ? void 0 : _a.defaultPrevented);
+  }
   selectionServiceSet(s) {
+    this.unsubscribeSelectionStore.forEach(v => v());
+    this.unsubscribeSelectionStore = [];
+    this.unsubscribeSelectionStore.push(s.onChange('nextFocus', (v) => {
+      this.focusCurrent(v, v);
+    }));
     this.selectionStoreService = new SelectionStoreService(s, {
       changeRange: range => { var _a; return !((_a = this.setRange.emit(range)) === null || _a === void 0 ? void 0 : _a.defaultPrevented); },
-      focus: (focus, end) => {
-        var _a;
-        const focused = { focus, end };
-        const { defaultPrevented } = this.internalFocusCell.emit(this.columnService.getSaveData(focus.y, focus.x));
-        if (defaultPrevented) {
+      focus: (focus, end, focusNextStore) => {
+        if (!focusNextStore) {
+          return this.focusCurrent(focus, end);
+        }
+        else {
+          this.internalNextStoreFocus.emit(focus);
           return false;
         }
-        return !((_a = this.focusCell.emit(focused)) === null || _a === void 0 ? void 0 : _a.defaultPrevented);
       },
     });
     this.keyboardService = new KeyboardService({
@@ -27614,6 +27664,8 @@ const OverlaySelection = class {
   disconnectedCallback() {
     var _a;
     (_a = this.columnService) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.unsubscribeSelectionStore.forEach(v => v());
+    this.unsubscribeSelectionStore = [];
   }
   renderRange(range) {
     const style = getElStyle(range, this.dimensionRow.state, this.dimensionCol.state);

package/dist/collection/components/data/revogr-data.js

@@ -50,7 +50,9 @@ export class RevogrData {
       for (let rgCol of cols) {
         cells.push(this.getCellRenderer(rgRow, rgCol, this.canDrag, /** grouping apply*/ this.columnService.hasGrouping ? depth : 0));
       }
-      rowsEls.push(h(RowRenderer, { rowClass: rowClass, size: rgRow.size, start: rgRow.start }, cells));
+      const row = h(RowRenderer, { rowClass: rowClass, size: rgRow.size, start: rgRow.start }, cells);
+      this.beforerowrender.emit({ row, model: dataRow, rowIndex: rgRow.itemIndex });
+      rowsEls.push(row);
     }
     return rowsEls;
   }
@@ -314,6 +316,26 @@ export class RevogrData {
           }
         }
       }
+    }, {
+      "method": "beforerowrender",
+      "name": "beforerowrender",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ row: VNode; rowIndex: number; model: any }",
+        "resolved": "{ row: VNode; rowIndex: number; model: any; }",
+        "references": {
+          "VNode": {
+            "location": "import",
+            "path": "@stencil/core"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{

package/dist/collection/components/overlay/keyboard.service.js

@@ -91,7 +91,7 @@ export class KeyboardService {
       const range = getRange(data.start, data.end);
       return this.sv.selectionStoreService.changeRange(range);
     }
-    return this.sv.selectionStoreService.focus(data.start);
+    return this.sv.selectionStoreService.focus(data.start, false, isAfterLast(data.start, eData) ? 1 : isBeforeFirst(data.start) ? -1 : 0);
   }
   keyUp(e) {
     if (isCtrlKey(e.keyCode, navigator.platform)) {
@@ -116,6 +116,12 @@ export class KeyboardService {
         e.preventDefault();
         break;
     }
+    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 };