@revolist/revogrid 3.3.0 → 3.3.2

package/custom-element/revo-grid.js

@@ -2576,7 +2576,7 @@ class ViewportService {
  * First we render vertical parts - pinned start, data, pinned end
  * Per each column we render data collections: headers, pinned top, center data, pinned bottom
  */
-const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onScroll }) => {
+const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onCancelEdit, onScroll }) => {
   const viewPortHtml = [];
   /** render viewports columns */
   for (let view of columns) {
@@ -2586,7 +2586,7 @@ const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns,
     ];
     view.dataPorts.forEach((data, j) => {
       const key = view.prop.key + (j + 1);
-      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onSetEdit: ({ detail }) => onEdit(detail) }),
+      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onCancelEdit: () => onCancelEdit(), onSetEdit: ({ detail }) => onEdit(detail) }),
         h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, slot: DATA_SLOT })),
         h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
         h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));
@@ -3147,7 +3147,8 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       return;
     }
     await timeout();
-    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, 'rgCol'), rgCol.pin || 'rgCol', rowSource);
+    const colGroup = rgCol.pin || 'rgCol';
+    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, colGroup), colGroup, rowSource);
   }
   /**
    * Register new virtual node inside of grid
@@ -3518,10 +3519,12 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       const anyView = this.viewport.columns[0];
       views.push(h("revogr-row-headers", { height: contentHeight, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, uiid: anyView.prop[UUID], rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollViewport: ({ detail: e }) => this.scrollingService.onScroll(e, 'headerRow'), onElementToScroll: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
     }
-    views.push(h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onEdit: detail => {
+    views.push(h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onCancelEdit: () => {
+        this.selectionStoreConnector.setEdit(false);
+      }, onEdit: detail => {
         const event = this.beforeeditstart.emit(detail);
         if (!event.defaultPrevented) {
-          this.selectionStoreConnector.setEdit(detail.isCancel ? false : detail.val);
+          this.selectionStoreConnector.setEdit(detail.val);
         }
       }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: details => this.scrollingService.onScroll(details) }));
     return (h(Host, Object.assign({}, { [`${UUID}`]: this.uuid }), h(RevoViewPort, { viewports: this.viewportProvider.stores, dimensions: this.dimensionProvider.stores, orderRef: e => (this.orderService = e), registerElement: (e, k) => this.scrollingService.registerElement(e, k), nakedClick: () => this.viewport.clearEdit(), onScroll: details => this.scrollingService.onScroll(details) }, views), this.extraElements));

package/custom-element/revogr-edit2.js

@@ -332,7 +332,11 @@ const Edit = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.closeEdit = createEvent(this, "closeEdit", 3);
     this.currentEditor = null;
   }
-  /** Callback triggered on cell editor save */
+  /**
+   * Callback triggered on cell editor save
+   * Closes editor when called
+   * @param preventFocus - if true editor will not be closed and next cell will not be focused
+   */
   onSave(val, preventFocus) {
     if (this.editCell) {
       this.cellEdit.emit({

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

@@ -76,7 +76,7 @@ class KeyboardService {
     if (this.sv.selectionStoreService.edited) {
       switch (e.code) {
         case codesLetter.ESCAPE:
-          this.sv.doEdit(undefined, true);
+          this.sv.cancelEdit();
           break;
       }
       return;
@@ -466,6 +466,7 @@ const OverlaySelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.internalCellEdit = createEvent(this, "internalCellEdit", 7);
     this.internalFocusCell = createEvent(this, "internalFocusCell", 7);
     this.setEdit = createEvent(this, "setEdit", 3);
+    this.cancelEdit = createEvent(this, "cancelEdit", 7);
     this.setRange = createEvent(this, "setRange", 7);
     this.setTempRange = createEvent(this, "setTempRange", 7);
     this.focusCell = createEvent(this, "focusCell", 3);
@@ -528,7 +529,8 @@ const OverlaySelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.keyboardService = new KeyboardService({
       selectionStoreService: this.selectionStoreService,
       selectionStore: s,
-      doEdit: (v, c) => this.doEdit(v, c),
+      doEdit: (v) => this.doEdit(v),
+      cancelEdit: () => this.closeEdit(),
       clearCell: () => this.clearCell(),
       getData: () => this.getData(),
       internalPaste: () => this.internalPaste.emit()
@@ -628,17 +630,20 @@ const OverlaySelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       this.autoFillService.selectionStart(e, data);
     }
   }
-  doEdit(val = '', isCancel = false) {
+  doEdit(val = '') {
     var _a;
     if (this.canEdit()) {
       const editCell = this.selectionStore.get('focus');
       const data = this.columnService.getSaveData(editCell.y, editCell.x);
-      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { isCancel,
-        val }));
+      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
     }
   }
+  /**
+   * Close editor event triggered
+   * @param details - if requires focus next
+   */
   closeEdit(e) {
-    this.doEdit(undefined, true);
+    this.cancelEdit.emit();
     if (e === null || e === void 0 ? void 0 : e.detail) {
       this.focusNext();
     }

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

@@ -24433,7 +24433,7 @@ class ViewportService {
  * First we render vertical parts - pinned start, data, pinned end
  * Per each column we render data collections: headers, pinned top, center data, pinned bottom
  */
-const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onScroll }) => {
+const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onCancelEdit, onScroll }) => {
   const viewPortHtml = [];
   /** render viewports columns */
   for (let view of columns) {
@@ -24443,7 +24443,7 @@ const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns,
     ];
     view.dataPorts.forEach((data, j) => {
       const key = view.prop.key + (j + 1);
-      const dataView = (index.h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onSetEdit: ({ detail }) => onEdit(detail) }),
+      const dataView = (index.h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onCancelEdit: () => onCancelEdit(), onSetEdit: ({ detail }) => onEdit(detail) }),
         index.h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, slot: DATA_SLOT })),
         index.h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
         index.h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));
@@ -25016,7 +25016,8 @@ const RevoGridComponent = class {
       return;
     }
     await timeout();
-    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, 'rgCol'), rgCol.pin || 'rgCol', rowSource);
+    const colGroup = rgCol.pin || 'rgCol';
+    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, colGroup), colGroup, rowSource);
   }
   /**
    * Register new virtual node inside of grid
@@ -25387,10 +25388,12 @@ const RevoGridComponent = class {
       const anyView = this.viewport.columns[0];
       views.push(index.h("revogr-row-headers", { height: contentHeight, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, uiid: anyView.prop[UUID], rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollViewport: ({ detail: e }) => this.scrollingService.onScroll(e, 'headerRow'), onElementToScroll: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
     }
-    views.push(index.h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onEdit: detail => {
+    views.push(index.h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onCancelEdit: () => {
+        this.selectionStoreConnector.setEdit(false);
+      }, onEdit: detail => {
         const event = this.beforeeditstart.emit(detail);
         if (!event.defaultPrevented) {
-          this.selectionStoreConnector.setEdit(detail.isCancel ? false : detail.val);
+          this.selectionStoreConnector.setEdit(detail.val);
         }
       }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: details => this.scrollingService.onScroll(details) }));
     return (index.h(index.Host, Object.assign({}, { [`${UUID}`]: this.uuid }), index.h(RevoViewPort, { viewports: this.viewportProvider.stores, dimensions: this.dimensionProvider.stores, orderRef: e => (this.orderService = e), registerElement: (e, k) => this.scrollingService.registerElement(e, k), nakedClick: () => this.viewport.clearEdit(), onScroll: details => this.scrollingService.onScroll(details) }, views), this.extraElements));
@@ -26086,7 +26089,11 @@ const Edit = class {
     this.closeEdit = index.createEvent(this, "closeEdit", 3);
     this.currentEditor = null;
   }
-  /** Callback triggered on cell editor save */
+  /**
+   * Callback triggered on cell editor save
+   * Closes editor when called
+   * @param preventFocus - if true editor will not be closed and next cell will not be focused
+   */
   onSave(val, preventFocus) {
     if (this.editCell) {
       this.cellEdit.emit({
@@ -27028,7 +27035,7 @@ class KeyboardService {
     if (this.sv.selectionStoreService.edited) {
       switch (e.code) {
         case codesLetter.ESCAPE:
-          this.sv.doEdit(undefined, true);
+          this.sv.cancelEdit();
           break;
       }
       return;
@@ -27417,6 +27424,7 @@ const OverlaySelection = class {
     this.internalCellEdit = index.createEvent(this, "internalCellEdit", 7);
     this.internalFocusCell = index.createEvent(this, "internalFocusCell", 7);
     this.setEdit = index.createEvent(this, "setEdit", 3);
+    this.cancelEdit = index.createEvent(this, "cancelEdit", 7);
     this.setRange = index.createEvent(this, "setRange", 7);
     this.setTempRange = index.createEvent(this, "setTempRange", 7);
     this.focusCell = index.createEvent(this, "focusCell", 3);
@@ -27479,7 +27487,8 @@ const OverlaySelection = class {
     this.keyboardService = new KeyboardService({
       selectionStoreService: this.selectionStoreService,
       selectionStore: s,
-      doEdit: (v, c) => this.doEdit(v, c),
+      doEdit: (v) => this.doEdit(v),
+      cancelEdit: () => this.closeEdit(),
       clearCell: () => this.clearCell(),
       getData: () => this.getData(),
       internalPaste: () => this.internalPaste.emit()
@@ -27579,17 +27588,20 @@ const OverlaySelection = class {
       this.autoFillService.selectionStart(e, data);
     }
   }
-  doEdit(val = '', isCancel = false) {
+  doEdit(val = '') {
     var _a;
     if (this.canEdit()) {
       const editCell = this.selectionStore.get('focus');
       const data = this.columnService.getSaveData(editCell.y, editCell.x);
-      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { isCancel,
-        val }));
+      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
     }
   }
+  /**
+   * Close editor event triggered
+   * @param details - if requires focus next
+   */
   closeEdit(e) {
-    this.doEdit(undefined, true);
+    this.cancelEdit.emit();
     if (e === null || e === void 0 ? void 0 : e.detail) {
       this.focusNext();
     }

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

@@ -29,7 +29,7 @@ export class KeyboardService {
     if (this.sv.selectionStoreService.edited) {
       switch (e.code) {
         case codesLetter.ESCAPE:
-          this.sv.doEdit(undefined, true);
+          this.sv.cancelEdit();
           break;
       }
       return;

package/dist/collection/components/overlay/revogr-edit.js

@@ -8,7 +8,11 @@ export class Edit {
   constructor() {
     this.currentEditor = null;
   }
-  /** Callback triggered on cell editor save */
+  /**
+   * Callback triggered on cell editor save
+   * Closes editor when called
+   * @param preventFocus - if true editor will not be closed and next cell will not be focused
+   */
   onSave(val, preventFocus) {
     if (this.editCell) {
       this.cellEdit.emit({
@@ -150,7 +154,7 @@ export class Edit {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Close editor event"
+        "text": "Close editor event\npass true if requires focus next"
       },
       "complexType": {
         "original": "boolean | undefined",

package/dist/collection/components/overlay/revogr-overlay-selection.js

@@ -71,7 +71,8 @@ export class OverlaySelection {
     this.keyboardService = new KeyboardService({
       selectionStoreService: this.selectionStoreService,
       selectionStore: s,
-      doEdit: (v, c) => this.doEdit(v, c),
+      doEdit: (v) => this.doEdit(v),
+      cancelEdit: () => this.closeEdit(),
       clearCell: () => this.clearCell(),
       getData: () => this.getData(),
       internalPaste: () => this.internalPaste.emit()
@@ -173,17 +174,20 @@ export class OverlaySelection {
       this.autoFillService.selectionStart(e, data);
     }
   }
-  doEdit(val = '', isCancel = false) {
+  doEdit(val = '') {
     var _a;
     if (this.canEdit()) {
       const editCell = this.selectionStore.get('focus');
       const data = this.columnService.getSaveData(editCell.y, editCell.x);
-      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { isCancel,
-        val }));
+      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
     }
   }
+  /**
+   * Close editor event triggered
+   * @param details - if requires focus next
+   */
   closeEdit(e) {
-    this.doEdit(undefined, true);
+    this.cancelEdit.emit();
     if (e === null || e === void 0 ? void 0 : e.detail) {
       this.focusNext();
     }
@@ -563,7 +567,7 @@ export class OverlaySelection {
       },
       "complexType": {
         "original": "Edition.BeforeEdit",
-        "resolved": "{ isCancel: boolean; } & BeforeSaveDataDetails",
+        "resolved": "{ prop: ColumnProp; model: DataType; val?: string; rowIndex: number; type: DimensionRows; }",
         "references": {
           "Edition": {
             "location": "import",
@@ -571,6 +575,21 @@ export class OverlaySelection {
           }
         }
       }
+    }, {
+      "method": "cancelEdit",
+      "name": "cancelEdit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Used for editors support when close requested"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }, {
       "method": "setRange",
       "name": "setRange",

package/dist/collection/components/revo-grid/revo-grid.js

@@ -203,7 +203,8 @@ export class RevoGridComponent {
       return;
     }
     await timeout();
-    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, 'rgCol'), rgCol.pin || 'rgCol', rowSource);
+    const colGroup = rgCol.pin || 'rgCol';
+    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, colGroup), colGroup, rowSource);
   }
   /**
    * Register new virtual node inside of grid
@@ -574,10 +575,12 @@ export class RevoGridComponent {
       const anyView = this.viewport.columns[0];
       views.push(h("revogr-row-headers", { height: contentHeight, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, uiid: anyView.prop[UUID], rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollViewport: ({ detail: e }) => this.scrollingService.onScroll(e, 'headerRow'), onElementToScroll: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
     }
-    views.push(h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onEdit: detail => {
+    views.push(h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onCancelEdit: () => {
+        this.selectionStoreConnector.setEdit(false);
+      }, onEdit: detail => {
         const event = this.beforeeditstart.emit(detail);
         if (!event.defaultPrevented) {
-          this.selectionStoreConnector.setEdit(detail.isCancel ? false : detail.val);
+          this.selectionStoreConnector.setEdit(detail.val);
         }
       }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: details => this.scrollingService.onScroll(details) }));
     return (h(Host, Object.assign({}, { [`${UUID}`]: this.uuid }),

package/dist/collection/components/revo-grid/viewport.section.js

@@ -9,7 +9,7 @@ import { DATA_SLOT, HEADER_SLOT } from './viewport.helpers';
  * First we render vertical parts - pinned start, data, pinned end
  * Per each column we render data collections: headers, pinned top, center data, pinned bottom
  */
-export const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onScroll }) => {
+export const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onCancelEdit, onScroll }) => {
   const viewPortHtml = [];
   /** render viewports columns */
   for (let view of columns) {
@@ -19,7 +19,7 @@ export const ViewPortSections = ({ resize, editors, rowClass, readonly, range, c
     ];
     view.dataPorts.forEach((data, j) => {
       const key = view.prop.key + (j + 1);
-      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onSetEdit: ({ detail }) => onEdit(detail) }),
+      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onCancelEdit: () => onCancelEdit(), onSetEdit: ({ detail }) => onEdit(detail) }),
         h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, slot: DATA_SLOT })),
         h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
         h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));

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

@@ -24429,7 +24429,7 @@ class ViewportService {
  * First we render vertical parts - pinned start, data, pinned end
  * Per each column we render data collections: headers, pinned top, center data, pinned bottom
  */
-const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onScroll }) => {
+const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onCancelEdit, onScroll }) => {
   const viewPortHtml = [];
   /** render viewports columns */
   for (let view of columns) {
@@ -24439,7 +24439,7 @@ const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns,
     ];
     view.dataPorts.forEach((data, j) => {
       const key = view.prop.key + (j + 1);
-      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onSetEdit: ({ detail }) => onEdit(detail) }),
+      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onCancelEdit: () => onCancelEdit(), onSetEdit: ({ detail }) => onEdit(detail) }),
         h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, slot: DATA_SLOT })),
         h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
         h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));
@@ -25012,7 +25012,8 @@ const RevoGridComponent = class {
       return;
     }
     await timeout();
-    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, 'rgCol'), rgCol.pin || 'rgCol', rowSource);
+    const colGroup = rgCol.pin || 'rgCol';
+    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, colGroup), colGroup, rowSource);
   }
   /**
    * Register new virtual node inside of grid
@@ -25383,10 +25384,12 @@ const RevoGridComponent = class {
       const anyView = this.viewport.columns[0];
       views.push(h("revogr-row-headers", { height: contentHeight, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, uiid: anyView.prop[UUID], rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollViewport: ({ detail: e }) => this.scrollingService.onScroll(e, 'headerRow'), onElementToScroll: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
     }
-    views.push(h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onEdit: detail => {
+    views.push(h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onCancelEdit: () => {
+        this.selectionStoreConnector.setEdit(false);
+      }, onEdit: detail => {
         const event = this.beforeeditstart.emit(detail);
         if (!event.defaultPrevented) {
-          this.selectionStoreConnector.setEdit(detail.isCancel ? false : detail.val);
+          this.selectionStoreConnector.setEdit(detail.val);
         }
       }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: details => this.scrollingService.onScroll(details) }));
     return (h(Host, Object.assign({}, { [`${UUID}`]: this.uuid }), h(RevoViewPort, { viewports: this.viewportProvider.stores, dimensions: this.dimensionProvider.stores, orderRef: e => (this.orderService = e), registerElement: (e, k) => this.scrollingService.registerElement(e, k), nakedClick: () => this.viewport.clearEdit(), onScroll: details => this.scrollingService.onScroll(details) }, views), this.extraElements));
@@ -26082,7 +26085,11 @@ const Edit = class {
     this.closeEdit = createEvent(this, "closeEdit", 3);
     this.currentEditor = null;
   }
-  /** Callback triggered on cell editor save */
+  /**
+   * Callback triggered on cell editor save
+   * Closes editor when called
+   * @param preventFocus - if true editor will not be closed and next cell will not be focused
+   */
   onSave(val, preventFocus) {
     if (this.editCell) {
       this.cellEdit.emit({
@@ -27024,7 +27031,7 @@ class KeyboardService {
     if (this.sv.selectionStoreService.edited) {
       switch (e.code) {
         case codesLetter.ESCAPE:
-          this.sv.doEdit(undefined, true);
+          this.sv.cancelEdit();
           break;
       }
       return;
@@ -27413,6 +27420,7 @@ const OverlaySelection = class {
     this.internalCellEdit = createEvent(this, "internalCellEdit", 7);
     this.internalFocusCell = createEvent(this, "internalFocusCell", 7);
     this.setEdit = createEvent(this, "setEdit", 3);
+    this.cancelEdit = createEvent(this, "cancelEdit", 7);
     this.setRange = createEvent(this, "setRange", 7);
     this.setTempRange = createEvent(this, "setTempRange", 7);
     this.focusCell = createEvent(this, "focusCell", 3);
@@ -27475,7 +27483,8 @@ const OverlaySelection = class {
     this.keyboardService = new KeyboardService({
       selectionStoreService: this.selectionStoreService,
       selectionStore: s,
-      doEdit: (v, c) => this.doEdit(v, c),
+      doEdit: (v) => this.doEdit(v),
+      cancelEdit: () => this.closeEdit(),
       clearCell: () => this.clearCell(),
       getData: () => this.getData(),
       internalPaste: () => this.internalPaste.emit()
@@ -27575,17 +27584,20 @@ const OverlaySelection = class {
       this.autoFillService.selectionStart(e, data);
     }
   }
-  doEdit(val = '', isCancel = false) {
+  doEdit(val = '') {
     var _a;
     if (this.canEdit()) {
       const editCell = this.selectionStore.get('focus');
       const data = this.columnService.getSaveData(editCell.y, editCell.x);
-      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { isCancel,
-        val }));
+      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
     }
   }
+  /**
+   * Close editor event triggered
+   * @param details - if requires focus next
+   */
   closeEdit(e) {
-    this.doEdit(undefined, true);
+    this.cancelEdit.emit();
     if (e === null || e === void 0 ? void 0 : e.detail) {
       this.focusNext();
     }