@revolist/revogrid 4.12.2 → 4.12.3

package/dist/types/plugins/filter/filter.plugin.d.ts

@@ -2,6 +2,7 @@ import { type VNode } from '../../stencil-public-runtime';
 import type { ColumnProp, ColumnRegular, DataType, PluginProviders } from "../../types/index";
 import { BasePlugin } from '../base.plugin';
 import type { ColumnFilterConfig, FilterCollectionItem, LogicFunction, MultiFilterItem, ShowData } from './filter.types';
+import { TrimmedEntity } from "../../store/index";
 export * from './filter.types';
 export * from './filter.indexed';
 export * from './filter.button';
@@ -67,6 +68,6 @@ export declare class FilterPlugin extends BasePlugin {
     /**
      * Get trimmed rows based on filter
      */
-    getRowFilter(rows: DataType[], filterItems: MultiFilterItem, columnByProp: Record<string, ColumnRegular>): Record<number, boolean>;
+    getRowFilter(rows: DataType[], filterItems: MultiFilterItem, columnByProp: Record<string, ColumnRegular>): TrimmedEntity;
     private shouldTrimRow;
 }

package/dist/types/plugins/groupingRow/grouping.row.plugin.d.ts

@@ -1,8 +1,12 @@
 import { type DSourceState } from "../../store/index";
-import { BasePlugin } from '../base.plugin';
-import type { GroupingOptions, OnExpandEvent } from './grouping.row.types';
 import type { DataType, DimensionRows, PluginProviders } from "../../types/index";
+import { BasePlugin } from '../base.plugin';
 import type { Observable } from '../../utils';
+import type { GroupingOptions, OnExpandEvent } from './grouping.row.types';
+export * from './grouping.row.expand.service';
+export * from './grouping.row.types';
+export * from './grouping.service';
+export * from './grouping.row.renderer';
 declare global {
     interface HTMLRevoGridElementEventMap {
         groupexpandclick: OnExpandEvent;
@@ -21,7 +25,6 @@ export declare class GroupingRowPlugin extends BasePlugin {
     private onDrag;
     private beforeTrimmedApply;
     private isSortingRunning;
-    private subscribe;
     /**
      * Starts global source update with group clearing and applying new one
      * Initiated when need to reapply grouping
@@ -34,7 +37,7 @@ export declare class GroupingRowPlugin extends BasePlugin {
      */
     private onDataSet;
     /**
-     * Externam call to apply grouping. Called by revogrid when prop changed.
+     * External call to apply grouping. Called by revogrid when prop changed.
      */
     setGrouping(options: GroupingOptions): void;
     clearGrouping(): void;

package/dist/types/plugins/groupingRow/grouping.row.renderer.d.ts

@@ -1,11 +1,14 @@
 import { RowProps } from '../../components/data/row-renderer';
 import { GroupLabelTemplateFunc } from './grouping.row.types';
-import { DataType, PositionItem } from "../../types/index";
+import { DataType, PositionItem, Providers } from "../../types/index";
 interface GroupRowPros extends RowProps {
     model: DataType;
     hasExpand: boolean;
+    providers: Providers;
     groupingCustomRenderer?: GroupLabelTemplateFunc | null;
 }
-type Props = GroupRowPros & PositionItem;
-declare const GroupingRowRenderer: (props: Props) => any;
+export type RowGroupingProps = GroupRowPros & PositionItem;
+export declare function expandEvent(e: MouseEvent, model: DataType, virtualIndex: number): void;
+export declare const GroupingRowRenderer: (props: RowGroupingProps) => any;
+export declare const expandSvgIconVNode: (expanded?: boolean) => any;
 export default GroupingRowRenderer;

package/dist/types/plugins/groupingRow/grouping.row.types.d.ts

@@ -1,12 +1,14 @@
 import type { VNode } from '../../stencil-public-runtime';
-import type { HyperFunc, ColumnProp, DimensionRows, DataType } from "../../types/index";
-export type GroupLabelTemplateFunc = (createElement: HyperFunc<VNode>, props: {
+import type { HyperFunc, ColumnProp, DimensionRows, DataType, Providers } from "../../types/index";
+interface GroupTemplateProp {
     name: string;
     itemIndex: number;
     expanded: boolean;
     depth: number;
+    providers: Providers;
     model?: DataType;
-}) => any;
+}
+export type GroupLabelTemplateFunc = (createElement: HyperFunc<VNode>, props: GroupTemplateProp) => any;
 export type GroupingOptions = {
     /**
      * Column props to which grouping will be applied
@@ -59,3 +61,4 @@ export type ExpandedOptions = {
      */
     groupLabelTemplate?: GroupLabelTemplateFunc;
 };
+export {};

package/dist/types/plugins/groupingRow/grouping.service.d.ts

@@ -14,7 +14,6 @@ export declare function gatherGrouping(array: DataType[], columnProps: ColumnPro
     depth: number;
     trimmed: Record<number, boolean>;
     oldNewIndexMap: Record<number, number>;
-    childrenByGroup: Record<string, number[]>;
 };
 export declare function getGroupingName(rgRow?: DataType): any;
 type GroupingItem = {

package/dist/types/plugins/index.d.ts

@@ -7,7 +7,6 @@ export * from './filter/filter.plugin';
 export * from './groupingColumn/columnGroupsRenderer';
 export * from './groupingColumn/headerGroupRenderer';
 export * from './groupingRow/grouping.row.plugin';
-export * from './groupingRow/grouping.service';
 export * from './moveColumn/column.drag.plugin';
 export * from './sorting/sorting.plugin';
 export * from './sorting/sorting.sign';

package/dist/types/store/dataSource/trimmed.plugin.d.ts

@@ -1,6 +1,8 @@
 import { Observable, PluginSubscribe } from '../../utils';
 import { DSourceState, GDataType } from './data.store';
-export type TrimmedEntity = Record<number, boolean>;
+export type TrimmedEntity = {
+    [physicalIndexInSource: number]: boolean;
+};
 export type Trimmed = Record<string, TrimmedEntity>;
 /**
  * Hide items from main collection

package/dist/types/types/interfaces.d.ts

@@ -491,12 +491,31 @@ export interface VirtualPositionItem extends PositionItem {
     size: number;
 }
 export type DataSourceState<T extends DataType | ColumnRegular, ST extends DimensionRows | DimensionCols> = {
+    /**
+     * List of indices for visible items in the grid
+     */
     items: number[];
+    /**
+     * List of indices for visible items in the grid, even if they are trimmed
+     * Update this collection if you want to change items order
+     */
     proxyItems: number[];
+    /**
+     * Actual data array
+     */
     source: T[];
+    /**
+     * Grouping information
+     */
     groupingDepth: number;
     groups: Record<any, any>;
+    /**
+     * Dimension type, can be rows or columns depending on context
+     */
     type: ST;
+    /**
+     * Info for trimming or filtering the data, to hide entities from visible data source
+     */
     trimmed: Record<any, any>;
 };
 export interface PositionItem {

package/hydrate/index.js

@@ -2589,6 +2589,12 @@ var registerHost = (elm, cmpMeta) => {
   elm["s-rc"] = [];
   return hostRefs.set(elm, hostRef);
 };
+var Build = {
+  isDev: false,
+  isBrowser: false,
+  isServer: true,
+  isTesting: false
+};
 var styles = /* @__PURE__ */ new Map();
 
 
@@ -6640,6 +6646,7 @@ const trimmedPlugin$1 = (store) => ({
                 // full sorted items list
                 const proxy = store.get('proxyItems');
                 const trimmed = gatherTrimmedItems(newVal);
+                // filter our physical indexes which are not trimmed
                 const newItems = proxy.filter(v => !trimmed[v]);
                 // set trimmed items in store
                 store.set('items', newItems);
@@ -8791,13 +8798,70 @@ function getSource(source, items, withoutGrouping = false) {
 function getExpanded(model = {}) {
     return model[GROUP_EXPANDED];
 }
+function flattenGroupMaps({ groupedValues, parentIds, isExpanded, itemIndex, expandedAll, prevExpanded, columnProps, }) {
+    const depth = parentIds.length;
+    const sourceWithGroups = [];
+    // collapse all groups in the beginning
+    let trimmed = {};
+    // index mapping
+    let oldNewIndexMap = {};
+    groupedValues.forEach((innerGroupedValues, groupId) => {
+        const levelIds = [...parentIds, groupId];
+        const mergedIds = levelIds.join(',');
+        const isGroupExpanded = isExpanded && (!!expandedAll || !!prevExpanded[mergedIds]);
+        sourceWithGroups.push({
+            [PSEUDO_GROUP_ITEM]: groupId,
+            [GROUP_DEPTH]: depth,
+            [PSEUDO_GROUP_ITEM_ID]: JSON.stringify(levelIds),
+            [PSEUDO_GROUP_ITEM_VALUE]: mergedIds,
+            [GROUP_EXPANDED]: isGroupExpanded,
+            [GROUP_COLUMN_PROP]: columnProps[depth],
+            [columnProps[depth]]: groupId,
+        });
+        itemIndex += 1;
+        if (!isGroupExpanded && depth) {
+            trimmed[itemIndex] = true;
+        }
+        if (Array.isArray(innerGroupedValues)) {
+            innerGroupedValues.forEach(value => {
+                itemIndex += 1;
+                if (!isGroupExpanded) {
+                    trimmed[itemIndex] = true;
+                }
+                oldNewIndexMap[value[GROUP_ORIGINAL_INDEX]] = itemIndex;
+            });
+            sourceWithGroups.push(...innerGroupedValues);
+        }
+        else {
+            const children = flattenGroupMaps({
+                groupedValues: innerGroupedValues,
+                parentIds: levelIds,
+                isExpanded: isGroupExpanded,
+                itemIndex,
+                expandedAll,
+                prevExpanded,
+                columnProps,
+            });
+            sourceWithGroups.push(...children.source);
+            trimmed = Object.assign(Object.assign({}, children.trimmed), trimmed);
+            oldNewIndexMap = Object.assign(Object.assign({}, children.oldNewIndexMap), oldNewIndexMap);
+            itemIndex = children.itemIndex;
+        }
+    });
+    return {
+        source: sourceWithGroups,
+        oldNewIndexMap,
+        trimmed,
+        itemIndex,
+    };
+}
 /**
  * Gather data for grouping
  * @param array - flat data array
  * @param columnProps - ids of groups
  * @param expanded - potentially expanded items if present
  */
-function gatherGrouping(array, columnProps, { prevExpanded, expandedAll, getGroupValue = getGroupValueDefault, }) {
+function gatherGrouping(array, columnProps, { prevExpanded = {}, expandedAll = false, getGroupValue = getGroupValueDefault, }) {
     const groupedItems = new Map();
     array.forEach((item, originalIndex) => {
         const groupLevelValues = columnProps.map(groupId => getGroupValue(item, groupId));
@@ -8810,72 +8874,31 @@ function gatherGrouping(array, columnProps, { prevExpanded, expandedAll, getGrou
             currentGroupLevel = currentGroupLevel.get(value);
         });
         if (!currentGroupLevel.has(lastLevelValue)) {
-            currentGroupLevel.set(lastLevelValue, []);
+            const groupItems = [];
+            currentGroupLevel.set(lastLevelValue, groupItems);
         }
         const lastLevelItems = currentGroupLevel.get(lastLevelValue);
         lastLevelItems.push(Object.assign(Object.assign({}, item), { [GROUP_ORIGINAL_INDEX]: originalIndex }));
     });
-    let itemIndex = -1;
     const groupingDepth = columnProps.length;
-    // collapse all groups in the beginning
-    const trimmed = {};
-    // index mapping
-    const oldNewIndexMap = {};
-    // check if group header exists
-    const pseudoGroupTest = {};
-    const sourceWithGroups = [];
-    function flattenGroupMaps(groupedValues, parentIds, isExpanded) {
-        const depth = parentIds.length;
-        groupedValues.forEach((innerGroupedValues, groupId) => {
-            const levelIds = [...parentIds, groupId];
-            const mergedIds = levelIds.join(',');
-            const isGroupExpanded = isExpanded && (!!expandedAll || !!(prevExpanded === null || prevExpanded === void 0 ? void 0 : prevExpanded[mergedIds]));
-            sourceWithGroups.push({
-                [PSEUDO_GROUP_ITEM]: groupId,
-                [GROUP_DEPTH]: depth,
-                [PSEUDO_GROUP_ITEM_ID]: JSON.stringify(levelIds),
-                [PSEUDO_GROUP_ITEM_VALUE]: mergedIds,
-                [GROUP_EXPANDED]: isGroupExpanded,
-                [GROUP_COLUMN_PROP]: columnProps[depth],
-                [columnProps[depth]]: groupId,
-            });
-            itemIndex += 1;
-            if (!isGroupExpanded && depth) {
-                trimmed[itemIndex] = true;
-            }
-            if (Array.isArray(innerGroupedValues)) {
-                innerGroupedValues.forEach(value => {
-                    itemIndex += 1;
-                    if (!isGroupExpanded) {
-                        trimmed[itemIndex] = true;
-                    }
-                    oldNewIndexMap[value[GROUP_ORIGINAL_INDEX]] = itemIndex;
-                    const pseudoGroupTestIds = levelIds.map((_value, index) => levelIds.slice(0, index + 1).join(','));
-                    pseudoGroupTestIds.forEach(pseudoGroupTestId => {
-                        if (!pseudoGroupTest[pseudoGroupTestId]) {
-                            pseudoGroupTest[pseudoGroupTestId] = [];
-                        }
-                        pseudoGroupTest[pseudoGroupTestId].push(itemIndex);
-                    });
-                });
-                sourceWithGroups.push(...innerGroupedValues);
-            }
-            else {
-                flattenGroupMaps(innerGroupedValues, levelIds, isGroupExpanded);
-            }
-        });
-    }
-    flattenGroupMaps(groupedItems, [], true);
+    const { source: sourceWithGroups, trimmed, oldNewIndexMap } = flattenGroupMaps({
+        groupedValues: groupedItems,
+        parentIds: [],
+        isExpanded: true,
+        itemIndex: -1,
+        expandedAll,
+        prevExpanded,
+        columnProps
+    });
     return {
         sourceWithGroups, // updates source mirror
         depth: groupingDepth, // largest depth for grouping
         trimmed, // used for expand/collapse grouping values
         oldNewIndexMap, // used for mapping old values to new
-        childrenByGroup: pseudoGroupTest, // used to get child items in group
     };
 }
 function getGroupingName(rgRow) {
-    return rgRow && rgRow[PSEUDO_GROUP_ITEM];
+    return rgRow === null || rgRow === void 0 ? void 0 : rgRow[PSEUDO_GROUP_ITEM];
 }
 function isGrouping(rgRow) {
     return typeof (rgRow === null || rgRow === void 0 ? void 0 : rgRow[PSEUDO_GROUP_ITEM]) !== 'undefined';
@@ -11740,11 +11763,7 @@ class FilterPlugin extends BasePlugin {
         if (defaultPrevented) {
             return;
         }
-        // check is trimmed event prevented
-        const isAddedEvent = await this.revogrid.addTrimmed(detail.itemsToFilter, FILTER_TRIMMED_TYPE);
-        if (isAddedEvent.defaultPrevented) {
-            return;
-        }
+        this.providers.data.setTrimmed({ [FILTER_TRIMMED_TYPE]: detail.itemsToFilter });
         // applies the hasFilter to the columns to show filter icon
         this.providers.column.updateColumns(columnsToUpdate);
         this.emit('afterfilterapply', {
@@ -12756,6 +12775,56 @@ function processDoubleConversionTrimmed(initiallyTrimed, firstLevelMap, secondLe
     return trimemedOptionsToUpgrade;
 }
 
+const PADDING_DEPTH = 10;
+const RowRenderer = ({ rowClass, index, size, start, depth }, cells) => {
+    const props = Object.assign({ [DATA_ROW]: index });
+    return (hAsync("div", Object.assign({}, props, { class: `rgRow ${rowClass || ''}`, style: {
+            height: `${size}px`,
+            transform: `translateY(${start}px)`,
+            paddingLeft: depth ? `${PADDING_DEPTH * depth}px` : undefined,
+        } }), cells));
+};
+
+function expandEvent(e, model, virtualIndex) {
+    var _a;
+    const event = new CustomEvent('groupexpandclick', {
+        detail: {
+            model,
+            virtualIndex,
+        },
+        cancelable: true,
+        bubbles: true,
+    });
+    (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
+}
+const GroupingRowRenderer = (props) => {
+    const { model, itemIndex, hasExpand, groupingCustomRenderer, providers } = props;
+    const name = model[PSEUDO_GROUP_ITEM];
+    const expanded = model[GROUP_EXPANDED];
+    const depth = parseInt(model[GROUP_DEPTH], 10) || 0;
+    if (!hasExpand) {
+        return hAsync(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }));
+    }
+    if (groupingCustomRenderer) {
+        return (hAsync(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }),
+            hAsync("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(hAsync, {
+                name,
+                model,
+                itemIndex,
+                expanded,
+                depth,
+                providers,
+            }))));
+    }
+    return (hAsync(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }),
+        hAsync("button", { class: { [GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) }, expandSvgIconVNode(expanded)),
+        name));
+};
+const expandSvgIconVNode = (expanded = false) => {
+    return (hAsync("svg", { "aria-hidden": "true", style: { transform: `rotate(${!expanded ? -90 : 0}deg)` }, focusable: "false", viewBox: "0 0 448 512" },
+        hAsync("path", { fill: "currentColor", d: "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" })));
+};
+
 class GroupingRowPlugin extends BasePlugin {
     getStore(type = GROUPING_ROW_TYPE) {
         return this.providers.data.stores[type].store;
@@ -12839,53 +12908,6 @@ class GroupingRowPlugin extends BasePlugin {
         const sortingPlugin = this.providers.plugins.getByClass(SortingPlugin);
         return !!(sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.sortingPromise);
     }
-    // subscribe to grid events to process them accordingly
-    subscribe() {
-        /** if grouping present and new data source arrived */
-        this.addEventListener('beforesourceset', ({ detail }) => {
-            var _a, _b, _c;
-            if (!(((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length) && ((_c = detail === null || detail === void 0 ? void 0 : detail.source) === null || _c === void 0 ? void 0 : _c.length))) {
-                return;
-            }
-            // if sorting is running don't apply grouping, wait for sorting, then it'll apply in @aftersortingapply
-            if (this.isSortingRunning()) {
-                return;
-            }
-            this.onDataSet(detail);
-        });
-        this.addEventListener('beforecolumnsset', ({ detail }) => {
-            this.setColumns(detail);
-        });
-        /**
-         * filter applied need to clear grouping and apply again
-         * based on new results can be new grouping
-         */
-        this.addEventListener('beforetrimmed', ({ detail: { trimmed, trimmedType } }) => this.beforeTrimmedApply(trimmed, trimmedType));
-        /**
-         * sorting applied need to clear grouping and apply again
-         * based on new results whole grouping order will changed
-         */
-        this.addEventListener('aftersortingapply', () => {
-            var _a, _b;
-            if (!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length)) {
-                return;
-            }
-            this.doSourceUpdate(Object.assign({}, this.options));
-        });
-        /**
-         * Apply logic for focus inside of grouping
-         * We can't focus on grouping rows, navigation only inside of groups for now
-         */
-        this.addEventListener('beforecellfocus', e => this.onFocus(e));
-        /**
-         * Prevent rgRow drag outside the group
-         */
-        this.addEventListener('roworderchanged', e => this.onDrag(e));
-        /**
-         * When grouping expand icon was clicked
-         */
-        this.addEventListener('groupexpandclick', e => this.onExpand(e.detail));
-    }
     /**
      * Starts global source update with group clearing and applying new one
      * Initiated when need to reapply grouping
@@ -12902,11 +12924,11 @@ class GroupingRowPlugin extends BasePlugin {
          * Group again
          * @param oldNewIndexMap - provides us mapping with new indexes vs old indexes
          */
-        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], expanded);
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], expanded);
         const customRenderer = options === null || options === void 0 ? void 0 : options.groupLabelTemplate;
         // setup source
         this.providers.data.setData(sourceWithGroups, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer }, true);
-        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap);
+        this.updateTrimmed(trimmed, oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap);
     }
     /**
      * Apply grouping on data set
@@ -12922,13 +12944,13 @@ class GroupingRowPlugin extends BasePlugin {
         }
         const source = data.source.filter(s => !isGrouping(s));
         const options = Object.assign(Object.assign({}, (this.revogrid.grouping || {})), { prevExpanded: preservedExpanded });
-        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = gatherGrouping(source, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.props) || [], options);
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, } = gatherGrouping(source, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.props) || [], options);
         data.source = sourceWithGroups;
         this.providers.data.setGrouping({ depth });
-        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexMap);
+        this.updateTrimmed(trimmed, oldNewIndexMap);
     }
     /**
-     * Externam call to apply grouping. Called by revogrid when prop changed.
+     * External call to apply grouping. Called by revogrid when prop changed.
      */
     setGrouping(options) {
         var _a, _b;
@@ -12940,12 +12962,12 @@ class GroupingRowPlugin extends BasePlugin {
             this.clearGrouping();
             return;
         }
-        // props exist and source inited
+        // props exist and source initd
         const { source } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'));
         if (source.length) {
             this.doSourceUpdate(Object.assign({}, options));
         }
-        // props exist and columns inited
+        // props exist and columns initd
         for (let t of columnTypes) {
             if (this.setColumnGrouping(this.providers.column.getColumns(t))) {
                 this.providers.column.refreshByType(t);
@@ -12953,7 +12975,50 @@ class GroupingRowPlugin extends BasePlugin {
             }
         }
         // if has any grouping subscribe to events again
-        this.subscribe();
+        /** if grouping present and new data source arrived */
+        this.addEventListener('beforesourceset', ({ detail }) => {
+            var _a, _b, _c;
+            if (!(((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length) && ((_c = detail === null || detail === void 0 ? void 0 : detail.source) === null || _c === void 0 ? void 0 : _c.length))) {
+                return;
+            }
+            // if sorting is running don't apply grouping, wait for sorting, then it'll apply in @aftersortingapply
+            if (this.isSortingRunning()) {
+                return;
+            }
+            this.onDataSet(detail);
+        });
+        this.addEventListener('beforecolumnsset', ({ detail }) => {
+            this.setColumns(detail);
+        });
+        /**
+         * filter applied need to clear grouping and apply again
+         * based on new results can be new grouping
+         */
+        this.addEventListener('beforetrimmed', ({ detail: { trimmed, trimmedType } }) => this.beforeTrimmedApply(trimmed, trimmedType));
+        /**
+         * sorting applied need to clear grouping and apply again
+         * based on new results whole grouping order will changed
+         */
+        this.addEventListener('aftersortingapply', () => {
+            var _a, _b;
+            if (!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length)) {
+                return;
+            }
+            this.doSourceUpdate(Object.assign({}, this.options));
+        });
+        /**
+         * Apply logic for focus inside of grouping
+         * We can't focus on grouping rows, navigation only inside of groups for now
+         */
+        this.addEventListener('beforecellfocus', e => this.onFocus(e));
+        /**
+         * Prevent rgRow drag outside the group
+         */
+        this.addEventListener('roworderchanged', e => this.onDrag(e));
+        /**
+         * When grouping expand icon was clicked
+         */
+        this.addEventListener('groupexpandclick', e => this.onExpand(e.detail));
     }
     // clear grouping
     clearGrouping() {
@@ -12977,7 +13042,7 @@ class GroupingRowPlugin extends BasePlugin {
         this.providers.data.setData(source, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, undefined, true);
         this.updateTrimmed(undefined, undefined, oldNewIndexes);
     }
-    updateTrimmed(trimmedGroup = {}, _childrenByGroup = {}, firstLevelMap = {}, secondLevelMap) {
+    updateTrimmed(trimmedGroup = {}, firstLevelMap = {}, secondLevelMap) {
         // map previously trimmed data
         const trimemedOptionsToUpgrade = processDoubleConversionTrimmed(this.getStore().get('trimmed'), firstLevelMap, secondLevelMap);
         for (let type in trimemedOptionsToUpgrade) {
@@ -15261,47 +15326,6 @@ class RevoGridExtra {
     }; }
 }
 
-const PADDING_DEPTH = 10;
-const RowRenderer = ({ rowClass, index, size, start, depth }, cells) => {
-    const props = Object.assign({ [DATA_ROW]: index });
-    return (hAsync("div", Object.assign({}, props, { class: `rgRow ${rowClass || ''}`, style: {
-            height: `${size}px`,
-            transform: `translateY(${start}px)`,
-            paddingLeft: depth ? `${PADDING_DEPTH * depth}px` : undefined,
-        } }), cells));
-};
-
-function expandEvent(e, model, virtualIndex) {
-    var _a;
-    const event = new CustomEvent('groupexpandclick', {
-        detail: {
-            model,
-            virtualIndex,
-        },
-        cancelable: true,
-        bubbles: true,
-    });
-    (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
-}
-const GroupingRowRenderer = (props) => {
-    const { model, itemIndex, hasExpand, groupingCustomRenderer } = props;
-    const name = model[PSEUDO_GROUP_ITEM];
-    const expanded = model[GROUP_EXPANDED];
-    const depth = parseInt(model[GROUP_DEPTH], 10) || 0;
-    if (!hasExpand) {
-        return hAsync(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }));
-    }
-    if (groupingCustomRenderer) {
-        return (hAsync(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }),
-            hAsync("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(hAsync, { name, model, itemIndex, expanded, depth }))));
-    }
-    return (hAsync(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }),
-        hAsync("button", { class: { [GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) },
-            hAsync("svg", { "aria-hidden": "true", style: { transform: `rotate(${!expanded ? -90 : 0}deg)` }, focusable: "false", viewBox: "0 0 448 512" },
-                hAsync("path", { fill: "currentColor", d: "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" }))),
-        name));
-};
-
 /**
  * Class is responsible for highlighting rows in a table.
  */
@@ -15376,6 +15400,10 @@ function renderCell(v) {
     // #region Regular cell
     else {
         if (!v.schemaModel.column) {
+            // something is wrong with data
+            if (Build === null || Build === void 0 ? void 0 : Build.isDev) {
+                console.error('Investigate column problem.', v.schemaModel);
+            }
             return '';
         }
         // Row drag
@@ -15509,7 +15537,8 @@ class RevogrData {
             const dataItem = getSourceItem(this.dataStore, rgRow.itemIndex);
             // #region Grouping
             if (isGrouping(dataItem)) {
-                rowsEls.push(hAsync(GroupingRowRenderer, Object.assign({}, rgRow, { index: rgRow.itemIndex, model: dataItem, groupingCustomRenderer: groupingCustomRenderer, hasExpand: this.columnService.hasGrouping })));
+                const gmodel = Object.assign(Object.assign({}, rgRow), { index: rgRow.itemIndex, model: dataItem, groupingCustomRenderer: groupingCustomRenderer, hasExpand: this.columnService.hasGrouping, providers: this.providers });
+                rowsEls.push(hAsync(GroupingRowRenderer, Object.assign({}, gmodel)));
                 continue;
             }
             // #endregion