@bryntum/gantt-react 7.2.0 → 7.2.2

package/src/BryntumGantt.tsx

@@ -354,7 +354,7 @@ export type BryntumGanttProps = {
      */
     emptyText? : string|EmptyTextDomConfig
     /**
-     * Allow using [Delete] and [Backspace] to remove events/assignments
+     * Allow using <kbd>Delete</kbd> and <kbd>Backspace</kbd> to remove events/assignments
      */
     enableDeleteKey? : boolean
     /**
@@ -700,6 +700,12 @@ export type BryntumGanttProps = {
      * Grid monitors window resize by default.
      */
     monitorResize? : boolean
+    /**
+     * Auto-increment counter used to generate names for new tasks created via the UI (e.g. "New task 1",
+     * "New task 2"). Incremented each time a new task is added using the context menu. You can set or reset
+     * this value, for example when switching projects.
+     */
+    newTaskCounter? : number
     /**
      * A callback function or a set of `name: value` properties to apply on tasks created using the task context menu.
      * Be aware that `name` value will be ignored since it's auto generated and may be configured with localization.
@@ -838,7 +844,7 @@ export type BryntumGanttProps = {
     rootElement? : ShadowRoot|HTMLElement
     /**
      * Row height in pixels. This allows the default height for rows to be controlled. Note that it may be
-     * overriden by specifying a [rowHeight](https://bryntum.com/products/gantt/docs/api/Grid/data/GridRowModel#field-rowHeight) on a per record basis, or from
+     * overridden by specifying a [rowHeight](https://bryntum.com/products/gantt/docs/api/Grid/data/GridRowModel#field-rowHeight) on a per record basis, or from
      * a column [renderer](https://bryntum.com/products/gantt/docs/api/Grid/column/Column#config-renderer).
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-rowHeight)
@@ -1059,7 +1065,7 @@ export type BryntumGanttProps = {
      * @param {string,Record<string, string>} detail.renderData.style Inline styles for the task bar DOM element. Use either 'border: 1px solid black' or { border: '1px solid black' }
      * @param {Core.helper.util.DomClassList,string} detail.renderData.wrapperCls An object whose property names represent the CSS class names to be added to the event wrapper element. Set a property's value to truthy or falsy to add or remove the class name based on the property name. Using this technique, you do not have to know whether the class is already there, or deal with concatenation.
      * @param {Core.helper.util.DomClassList,string} detail.renderData.iconCls An object whose property names represent the CSS class names to be added to a task icon element.
-     * @param {Scheduler.model.TimeSpan[],TimeSpanConfig[]} indicators An array that can be populated with TimeSpan records or their config objects to have them rendered in the task row
+     * @param {Scheduler.model.TimeSpan[],TimeSpanConfig[]} indicators An array that can be populated with TimeSpan records or their config objects to have them rendered in the task row <h3>Using JSX (React)</h3> When using the Bryntum React wrapper, the task renderer can return JSX elements: ```javascript taskRenderer({ taskRecord, renderData }) {     return &lt;MyTaskComponent task={taskRecord} />; } ``` *Using JSX in the task renderer creates a React portal for each rendered task. For Gantt charts with many visible tasks or frequently re-rendered views, this may impact scrolling performance compared to returning plain strings or [DomConfig](https://bryntum.com/products/gantt/docs/api/Core/helper/DomHelper#typedef-DomConfig) objects. Consider using JSX primarily for tasks that require complex interactive React components.*
      * @returns {string,DomConfig,DomConfig[]} A simple string, or a DomConfig object defining the actual HTML
      */
     taskRenderer? : (detail: { taskRecord: TaskModel, renderData: { cls: DomClassList|string, style: string|Record<string, string>, wrapperCls: DomClassList|string, iconCls: DomClassList|string } }, indicators: TimeSpan[]|TimeSpanConfig[]) => string|DomConfig|DomConfig[]
@@ -1371,7 +1377,7 @@ export type BryntumGanttProps = {
      */
     onAfterTaskSegmentDrop? : ((event: { source: Gantt, taskRecords: TaskModel[], valid: boolean }) => void)|string
     /**
-     * Fires before an assignment is removed. Can be triggered by user pressing [DELETE] or [BACKSPACE] or
+     * Fires before an assignment is removed. Can be triggered by user pressing <kbd>Delete</kbd> or <kbd>Backspace</kbd> or
      * by the event editor. Can for example be used to display a custom dialog to confirm deletion, in which
      * case records should be "manually" removed after confirmation:
      * ...
@@ -1408,7 +1414,7 @@ export type BryntumGanttProps = {
      */
     onBeforeCellEditStart? : ((event: { source: Grid, editorContext: CellEditorContext }) => Promise<boolean>|boolean|void)|string
     /**
-     * Fires on the owning Grid before deleting a range of selected cell values by pressing `Backspace` or `Del`
+     * Fires on the owning Grid before deleting a range of selected cell values by pressing <kbd>Backspace</kbd> or <kbd>Delete</kbd>
      * buttons while [autoEdit](https://bryntum.com/products/gantt/docs/api/Grid/feature/CellEdit#config-autoEdit) is set to `true`. Return `false` to prevent editing.
      * @param {object} event Event object
      * @param {Grid.view.Grid} event.source Owner grid
@@ -1568,7 +1574,7 @@ export type BryntumGanttProps = {
      */
     onBeforeDragCreateFinalize? : ((event: { source: Gantt, proxyElement: HTMLElement, context: { async: boolean, finalize: Function } }) => void)|string
     /**
-     * Fires before an event is removed. Can be triggered by user pressing [DELETE] or [BACKSPACE] or by the
+     * Fires before an event is removed. Can be triggered by user pressing <kbd>Delete</kbd> or <kbd>Backspace</kbd> or by the
      * event editor. Return `false` to immediately veto the removal (or a `Promise` yielding `true` or `false`
      * for async vetoing).
      * ...
@@ -2808,7 +2814,7 @@ export type BryntumGanttProps = {
      * @param {Response} event.response Optional response, if received
      * @param {Error} event.error Optional error, if exception occurred
      */
-    onPdfExport? : ((event: { response?: any, error?: Error }) => void)|string
+    onPdfExport? : ((event: { response?: Response, error?: Error }) => void)|string
     /**
      * Fired on the owning Scheduler or Gantt widget when dragging the percent bar
      * @param {object} event Event object
@@ -3515,6 +3521,14 @@ export type BryntumGanttProps = {
      * @param {boolean} event.hasChanges Whether any changes are recorded that are not yet attached to a version.
      */
     onTransactionChange? : ((event: { hasChanges: boolean }) => void)|string
+    /**
+     * Fired on the owning Grid/Scheduler/Gantt after tree grouping levels change
+     * @param {object} event Event object
+     * @param {Grid.view.Grid} event.source The grid instance
+     * @param {(string|Function)[]} event.groupers Array of field names or functions representing the current grouping levels
+     * @param {(string|Function)[]} event.oldGroupers Array of field names or functions representing the previous grouping levels
+     */
+    onTreeGroup? : ((event: { source: Grid, groupers: (string|Function)[], oldGroupers: (string|Function)[] }) => void)|string
     /**
      * Fires when row locking is disabled.
      * @param {object} event Event object
@@ -3580,7 +3594,7 @@ export type BryntumGanttProps = {
     cellEditFeature? : object|boolean|string|CellEdit|CellEditConfig
     /**
      * Right click to display context menu for cells. To invoke the cell menu in a keyboard-accessible manner, use the
-     * `SPACE` key when the cell is focused.
+     * <kbd>Space</kbd> key when the cell is focused.
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Grid/feature/CellMenu)
      */
@@ -3723,8 +3737,8 @@ export type BryntumGanttProps = {
     filterBarFeature? : object|boolean|string|FilterBar|FilterBarConfig
     /**
      * Enables rendering and handling of row groups. The actual grouping is done in the store, but triggered by
-     * <kbd>shift</kbd> + clicking headers, or by using the context menu, or by using two finger tap (one on header,
-     * one anywhere on grid). Use <kbd>shift</kbd> + <kbd>alt</kbd> + click, or the context menu, to remove a column
+     * <kbd>Shift</kbd> + clicking headers, or by using the context menu, or by using two finger tap (one on header,
+     * one anywhere on grid). Use <kbd>Shift</kbd> + <kbd>Alt</kbd> + click, or the context menu, to remove a column
      * grouper.
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Grid/feature/Group)
@@ -4380,6 +4394,7 @@ export class BryntumGantt extends React.Component<BryntumGanttProps> {
         'minHeight',
         'minWidth',
         'minZoomLevel',
+        'newTaskCounter',
         'onAfterDependencyCreateDrop',
         'onAfterDependencySave',
         'onAfterDragCreate',
@@ -4629,6 +4644,7 @@ export class BryntumGantt extends React.Component<BryntumGanttProps> {
         'onToggleNode',
         'onToolClick',
         'onTransactionChange',
+        'onTreeGroup',
         'onUnlockRows',
         'onUnsplit',
         'onVisibleDateRangeChange',

package/src/BryntumGanttBase.tsx

@@ -354,7 +354,7 @@ export type BryntumGanttBaseProps = {
      */
     emptyText? : string|EmptyTextDomConfig
     /**
-     * Allow using [Delete] and [Backspace] to remove events/assignments
+     * Allow using <kbd>Delete</kbd> and <kbd>Backspace</kbd> to remove events/assignments
      */
     enableDeleteKey? : boolean
     /**
@@ -700,6 +700,12 @@ export type BryntumGanttBaseProps = {
      * Grid monitors window resize by default.
      */
     monitorResize? : boolean
+    /**
+     * Auto-increment counter used to generate names for new tasks created via the UI (e.g. "New task 1",
+     * "New task 2"). Incremented each time a new task is added using the context menu. You can set or reset
+     * this value, for example when switching projects.
+     */
+    newTaskCounter? : number
     /**
      * A callback function or a set of `name: value` properties to apply on tasks created using the task context menu.
      * Be aware that `name` value will be ignored since it's auto generated and may be configured with localization.
@@ -838,7 +844,7 @@ export type BryntumGanttBaseProps = {
     rootElement? : ShadowRoot|HTMLElement
     /**
      * Row height in pixels. This allows the default height for rows to be controlled. Note that it may be
-     * overriden by specifying a [rowHeight](https://bryntum.com/products/gantt/docs/api/Grid/data/GridRowModel#field-rowHeight) on a per record basis, or from
+     * overridden by specifying a [rowHeight](https://bryntum.com/products/gantt/docs/api/Grid/data/GridRowModel#field-rowHeight) on a per record basis, or from
      * a column [renderer](https://bryntum.com/products/gantt/docs/api/Grid/column/Column#config-renderer).
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Gantt/view/GanttBase#config-rowHeight)
@@ -1059,7 +1065,7 @@ export type BryntumGanttBaseProps = {
      * @param {string,Record<string, string>} detail.renderData.style Inline styles for the task bar DOM element. Use either 'border: 1px solid black' or { border: '1px solid black' }
      * @param {Core.helper.util.DomClassList,string} detail.renderData.wrapperCls An object whose property names represent the CSS class names to be added to the event wrapper element. Set a property's value to truthy or falsy to add or remove the class name based on the property name. Using this technique, you do not have to know whether the class is already there, or deal with concatenation.
      * @param {Core.helper.util.DomClassList,string} detail.renderData.iconCls An object whose property names represent the CSS class names to be added to a task icon element.
-     * @param {Scheduler.model.TimeSpan[],TimeSpanConfig[]} indicators An array that can be populated with TimeSpan records or their config objects to have them rendered in the task row
+     * @param {Scheduler.model.TimeSpan[],TimeSpanConfig[]} indicators An array that can be populated with TimeSpan records or their config objects to have them rendered in the task row <h3>Using JSX (React)</h3> When using the Bryntum React wrapper, the task renderer can return JSX elements: ```javascript taskRenderer({ taskRecord, renderData }) {     return &lt;MyTaskComponent task={taskRecord} />; } ``` *Using JSX in the task renderer creates a React portal for each rendered task. For Gantt charts with many visible tasks or frequently re-rendered views, this may impact scrolling performance compared to returning plain strings or [DomConfig](https://bryntum.com/products/gantt/docs/api/Core/helper/DomHelper#typedef-DomConfig) objects. Consider using JSX primarily for tasks that require complex interactive React components.*
      * @returns {string,DomConfig,DomConfig[]} A simple string, or a DomConfig object defining the actual HTML
      */
     taskRenderer? : (detail: { taskRecord: TaskModel, renderData: { cls: DomClassList|string, style: string|Record<string, string>, wrapperCls: DomClassList|string, iconCls: DomClassList|string } }, indicators: TimeSpan[]|TimeSpanConfig[]) => string|DomConfig|DomConfig[]
@@ -1370,7 +1376,7 @@ export type BryntumGanttBaseProps = {
      */
     onAfterTaskSegmentDrop? : ((event: { source: Gantt, taskRecords: TaskModel[], valid: boolean }) => void)|string
     /**
-     * Fires before an assignment is removed. Can be triggered by user pressing [DELETE] or [BACKSPACE] or
+     * Fires before an assignment is removed. Can be triggered by user pressing <kbd>Delete</kbd> or <kbd>Backspace</kbd> or
      * by the event editor. Can for example be used to display a custom dialog to confirm deletion, in which
      * case records should be "manually" removed after confirmation:
      * ...
@@ -1407,7 +1413,7 @@ export type BryntumGanttBaseProps = {
      */
     onBeforeCellEditStart? : ((event: { source: Grid, editorContext: CellEditorContext }) => Promise<boolean>|boolean|void)|string
     /**
-     * Fires on the owning Grid before deleting a range of selected cell values by pressing `Backspace` or `Del`
+     * Fires on the owning Grid before deleting a range of selected cell values by pressing <kbd>Backspace</kbd> or <kbd>Delete</kbd>
      * buttons while [autoEdit](https://bryntum.com/products/gantt/docs/api/Grid/feature/CellEdit#config-autoEdit) is set to `true`. Return `false` to prevent editing.
      * @param {object} event Event object
      * @param {Grid.view.Grid} event.source Owner grid
@@ -1567,7 +1573,7 @@ export type BryntumGanttBaseProps = {
      */
     onBeforeDragCreateFinalize? : ((event: { source: Gantt, proxyElement: HTMLElement, context: { async: boolean, finalize: Function } }) => void)|string
     /**
-     * Fires before an event is removed. Can be triggered by user pressing [DELETE] or [BACKSPACE] or by the
+     * Fires before an event is removed. Can be triggered by user pressing <kbd>Delete</kbd> or <kbd>Backspace</kbd> or by the
      * event editor. Return `false` to immediately veto the removal (or a `Promise` yielding `true` or `false`
      * for async vetoing).
      * ...
@@ -2807,7 +2813,7 @@ export type BryntumGanttBaseProps = {
      * @param {Response} event.response Optional response, if received
      * @param {Error} event.error Optional error, if exception occurred
      */
-    onPdfExport? : ((event: { response?: any, error?: Error }) => void)|string
+    onPdfExport? : ((event: { response?: Response, error?: Error }) => void)|string
     /**
      * Fired on the owning Scheduler or Gantt widget when dragging the percent bar
      * @param {object} event Event object
@@ -3514,6 +3520,14 @@ export type BryntumGanttBaseProps = {
      * @param {boolean} event.hasChanges Whether any changes are recorded that are not yet attached to a version.
      */
     onTransactionChange? : ((event: { hasChanges: boolean }) => void)|string
+    /**
+     * Fired on the owning Grid/Scheduler/Gantt after tree grouping levels change
+     * @param {object} event Event object
+     * @param {Grid.view.Grid} event.source The grid instance
+     * @param {(string|Function)[]} event.groupers Array of field names or functions representing the current grouping levels
+     * @param {(string|Function)[]} event.oldGroupers Array of field names or functions representing the previous grouping levels
+     */
+    onTreeGroup? : ((event: { source: Grid, groupers: (string|Function)[], oldGroupers: (string|Function)[] }) => void)|string
     /**
      * Fires when row locking is disabled.
      * @param {object} event Event object
@@ -3579,7 +3593,7 @@ export type BryntumGanttBaseProps = {
     cellEditFeature? : object|boolean|string|CellEdit|CellEditConfig
     /**
      * Right click to display context menu for cells. To invoke the cell menu in a keyboard-accessible manner, use the
-     * `SPACE` key when the cell is focused.
+     * <kbd>Space</kbd> key when the cell is focused.
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Grid/feature/CellMenu)
      */
@@ -3722,8 +3736,8 @@ export type BryntumGanttBaseProps = {
     filterBarFeature? : object|boolean|string|FilterBar|FilterBarConfig
     /**
      * Enables rendering and handling of row groups. The actual grouping is done in the store, but triggered by
-     * <kbd>shift</kbd> + clicking headers, or by using the context menu, or by using two finger tap (one on header,
-     * one anywhere on grid). Use <kbd>shift</kbd> + <kbd>alt</kbd> + click, or the context menu, to remove a column
+     * <kbd>Shift</kbd> + clicking headers, or by using the context menu, or by using two finger tap (one on header,
+     * one anywhere on grid). Use <kbd>Shift</kbd> + <kbd>Alt</kbd> + click, or the context menu, to remove a column
      * grouper.
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Grid/feature/Group)
@@ -4378,6 +4392,7 @@ export class BryntumGanttBase extends React.Component<BryntumGanttBaseProps> {
         'minHeight',
         'minWidth',
         'minZoomLevel',
+        'newTaskCounter',
         'onAfterDependencyCreateDrop',
         'onAfterDependencySave',
         'onAfterDragCreate',
@@ -4627,6 +4642,7 @@ export class BryntumGanttBase extends React.Component<BryntumGanttBaseProps> {
         'onToggleNode',
         'onToolClick',
         'onTransactionChange',
+        'onTreeGroup',
         'onUnlockRows',
         'onUnsplit',
         'onVisibleDateRangeChange',

package/src/BryntumGanttProjectModel.tsx

@@ -823,7 +823,7 @@ export type BryntumGanttProjectModelProps = {
      * @param {object} event.requestOptions The request options passed to the request.
      * @param {Response} event.rawResponse The native Response object
      */
-    onLoad? : ((event: { source: AbstractCrudManager, response: object, responseOptions: object, requestOptions: object, rawResponse: any }) => void)|string
+    onLoad? : ((event: { source: AbstractCrudManager, response: object, responseOptions: object, requestOptions: object, rawResponse: Response }) => void)|string
     /**
      * Fired after [load request](https://bryntum.com/products/gantt/docs/api/Scheduler/crud/AbstractCrudManagerMixin#function-load) was canceled by some [beforeLoad](#Scheduler/crud/AbstractCrudManagerMixin#event-beforeLoad)
      * listener or due to incomplete prior load request.
@@ -842,7 +842,7 @@ export type BryntumGanttProjectModelProps = {
      * @param {object} event.requestOptions The request options passed to the request.
      * @param {Response} event.rawResponse The native Response object
      */
-    onLoadFail? : ((event: { source: AbstractCrudManager, response: object, responseText: string, responseOptions: object, requestOptions: object, rawResponse: any }) => void)|string
+    onLoadFail? : ((event: { source: AbstractCrudManager, response: object, responseText: string, responseOptions: object, requestOptions: object, rawResponse: Response }) => void)|string
     /**
      * Fires when registered stores get into state when they don't have any
      * not persisted change. This happens after [load](https://bryntum.com/products/gantt/docs/api/Scheduler/crud/AbstractCrudManagerMixin#function-load) or [sync](#Scheduler/crud/AbstractCrudManagerMixin#function-sync) request
@@ -872,7 +872,7 @@ export type BryntumGanttProjectModelProps = {
      * @param {object} event.requestOptions The request options passed to the request.
      * @param {Response} event.rawResponse The native Response object
      */
-    onRequestDone? : ((event: { source: AbstractCrudManager, requestType: 'sync'|'load', response: object, responseOptions: object, requestOptions: object, rawResponse: any }) => void)|string
+    onRequestDone? : ((event: { source: AbstractCrudManager, requestType: 'sync'|'load', response: object, responseOptions: object, requestOptions: object, rawResponse: Response }) => void)|string
     /**
      * Fires when a request fails.
      * @param {object} event Event object
@@ -884,7 +884,7 @@ export type BryntumGanttProjectModelProps = {
      * @param {object} event.requestOptions The request options passed to the request.
      * @param {Response} event.rawResponse The native Response object
      */
-    onRequestFail? : ((event: { source: AbstractCrudManager, requestType: 'sync'|'load', response: object, responseText: string, responseOptions: object, requestOptions: object, rawResponse: any }) => void)|string
+    onRequestFail? : ((event: { source: AbstractCrudManager, requestType: 'sync'|'load', response: object, responseText: string, responseOptions: object, requestOptions: object, rawResponse: Response }) => void)|string
     /**
      * This event triggers when a new revision is added to the project. It is used to notify the backend about the
      * new revision.
@@ -914,7 +914,7 @@ export type BryntumGanttProjectModelProps = {
      * @param {object} event.requestOptions The request options passed to the request.
      * @param {Response} event.rawResponse The native Response object
      */
-    onSync? : ((event: { source: AbstractCrudManager, response: object, responseOptions: object, requestOptions: object, rawResponse: any }) => void)|string
+    onSync? : ((event: { source: AbstractCrudManager, response: object, responseOptions: object, requestOptions: object, rawResponse: Response }) => void)|string
     /**
      * Fires after [sync request](https://bryntum.com/products/gantt/docs/api/Scheduler/crud/AbstractCrudManagerMixin#function-sync) was canceled by some [beforeSync](#Scheduler/crud/AbstractCrudManagerMixin#event-beforeSync) listener.
      * @param {object} event Event object
@@ -939,7 +939,7 @@ export type BryntumGanttProjectModelProps = {
      * @param {object} event.requestOptions The request options passed to the request.
      * @param {Response} event.rawResponse The native Response object
      */
-    onSyncFail? : ((event: { source: AbstractCrudManager, response: object, responseText: string, responseOptions: object, requestOptions: object, rawResponse: any }) => void)|string
+    onSyncFail? : ((event: { source: AbstractCrudManager, response: object, responseText: string, responseOptions: object, requestOptions: object, rawResponse: Response }) => void)|string
 
 }
 

package/src/BryntumGrid.tsx

@@ -559,7 +559,7 @@ export type BryntumGridProps = {
     rootElement? : ShadowRoot|HTMLElement
     /**
      * Row height in pixels. This allows the default height for rows to be controlled. Note that it may be
-     * overriden by specifying a [rowHeight](https://bryntum.com/products/gantt/docs/api/Grid/data/GridRowModel#field-rowHeight) on a per record basis, or from
+     * overridden by specifying a [rowHeight](https://bryntum.com/products/gantt/docs/api/Grid/data/GridRowModel#field-rowHeight) on a per record basis, or from
      * a column [renderer](https://bryntum.com/products/gantt/docs/api/Grid/column/Column#config-renderer).
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Grid/view/Grid#config-rowHeight)
@@ -779,7 +779,7 @@ export type BryntumGridProps = {
      */
     onBeforeCellEditStart? : ((event: { source: Grid, editorContext: CellEditorContext }) => Promise<boolean>|boolean|void)|string
     /**
-     * Fires on the owning Grid before deleting a range of selected cell values by pressing `Backspace` or `Del`
+     * Fires on the owning Grid before deleting a range of selected cell values by pressing <kbd>Backspace</kbd> or <kbd>Delete</kbd>
      * buttons while [autoEdit](https://bryntum.com/products/gantt/docs/api/Grid/feature/CellEdit#config-autoEdit) is set to `true`. Return `false` to prevent editing.
      * @param {object} event Event object
      * @param {Grid.view.Grid} event.source Owner grid
@@ -1543,7 +1543,7 @@ export type BryntumGridProps = {
      * @param {Response} event.response Optional response, if received
      * @param {Error} event.error Optional error, if exception occurred
      */
-    onPdfExport? : ((event: { response?: any, error?: Error }) => void)|string
+    onPdfExport? : ((event: { response?: Response, error?: Error }) => void)|string
     /**
      * Fired when a Widget's read only state is toggled
      * @param {object} event Event object
@@ -1754,6 +1754,14 @@ export type BryntumGridProps = {
      * @param {Core.widget.Tool} event.tool The tool which is being clicked.
      */
     onToolClick? : ((event: { source: Tool, tool: Tool }) => void)|string
+    /**
+     * Fired on the owning Grid/Scheduler/Gantt after tree grouping levels change
+     * @param {object} event Event object
+     * @param {Grid.view.Grid} event.source The grid instance
+     * @param {(string|Function)[]} event.groupers Array of field names or functions representing the current grouping levels
+     * @param {(string|Function)[]} event.oldGroupers Array of field names or functions representing the previous grouping levels
+     */
+    onTreeGroup? : ((event: { source: Grid, groupers: (string|Function)[], oldGroupers: (string|Function)[] }) => void)|string
     /**
      * Fires when row locking is disabled.
      * @param {object} event Event object
@@ -1798,7 +1806,7 @@ export type BryntumGridProps = {
     cellEditFeature? : object|boolean|string|GridCellEdit|GridCellEditConfig
     /**
      * Right click to display context menu for cells. To invoke the cell menu in a keyboard-accessible manner, use the
-     * `SPACE` key when the cell is focused.
+     * <kbd>Space</kbd> key when the cell is focused.
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Grid/feature/CellMenu)
      */
@@ -1898,8 +1906,8 @@ export type BryntumGridProps = {
     filterBarFeature? : object|boolean|string|FilterBar|FilterBarConfig
     /**
      * Enables rendering and handling of row groups. The actual grouping is done in the store, but triggered by
-     * <kbd>shift</kbd> + clicking headers, or by using the context menu, or by using two finger tap (one on header,
-     * one anywhere on grid). Use <kbd>shift</kbd> + <kbd>alt</kbd> + click, or the context menu, to remove a column
+     * <kbd>Shift</kbd> + clicking headers, or by using the context menu, or by using two finger tap (one on header,
+     * one anywhere on grid). Use <kbd>Shift</kbd> + <kbd>Alt</kbd> + click, or the context menu, to remove a column
      * grouper.
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Grid/feature/Group)
@@ -2359,6 +2367,7 @@ export class BryntumGrid extends React.Component<BryntumGridProps> {
         'onToggleGroup',
         'onToggleNode',
         'onToolClick',
+        'onTreeGroup',
         'onUnlockRows',
         'onUnsplit',
         'preserveScroll',

package/src/BryntumGridBase.tsx

@@ -559,7 +559,7 @@ export type BryntumGridBaseProps = {
     rootElement? : ShadowRoot|HTMLElement
     /**
      * Row height in pixels. This allows the default height for rows to be controlled. Note that it may be
-     * overriden by specifying a [rowHeight](https://bryntum.com/products/gantt/docs/api/Grid/data/GridRowModel#field-rowHeight) on a per record basis, or from
+     * overridden by specifying a [rowHeight](https://bryntum.com/products/gantt/docs/api/Grid/data/GridRowModel#field-rowHeight) on a per record basis, or from
      * a column [renderer](https://bryntum.com/products/gantt/docs/api/Grid/column/Column#config-renderer).
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Grid/view/GridBase#config-rowHeight)
@@ -778,7 +778,7 @@ export type BryntumGridBaseProps = {
      */
     onBeforeCellEditStart? : ((event: { source: Grid, editorContext: CellEditorContext }) => Promise<boolean>|boolean|void)|string
     /**
-     * Fires on the owning Grid before deleting a range of selected cell values by pressing `Backspace` or `Del`
+     * Fires on the owning Grid before deleting a range of selected cell values by pressing <kbd>Backspace</kbd> or <kbd>Delete</kbd>
      * buttons while [autoEdit](https://bryntum.com/products/gantt/docs/api/Grid/feature/CellEdit#config-autoEdit) is set to `true`. Return `false` to prevent editing.
      * @param {object} event Event object
      * @param {Grid.view.Grid} event.source Owner grid
@@ -1542,7 +1542,7 @@ export type BryntumGridBaseProps = {
      * @param {Response} event.response Optional response, if received
      * @param {Error} event.error Optional error, if exception occurred
      */
-    onPdfExport? : ((event: { response?: any, error?: Error }) => void)|string
+    onPdfExport? : ((event: { response?: Response, error?: Error }) => void)|string
     /**
      * Fired when a Widget's read only state is toggled
      * @param {object} event Event object
@@ -1753,6 +1753,14 @@ export type BryntumGridBaseProps = {
      * @param {Core.widget.Tool} event.tool The tool which is being clicked.
      */
     onToolClick? : ((event: { source: Tool, tool: Tool }) => void)|string
+    /**
+     * Fired on the owning Grid/Scheduler/Gantt after tree grouping levels change
+     * @param {object} event Event object
+     * @param {Grid.view.Grid} event.source The grid instance
+     * @param {(string|Function)[]} event.groupers Array of field names or functions representing the current grouping levels
+     * @param {(string|Function)[]} event.oldGroupers Array of field names or functions representing the previous grouping levels
+     */
+    onTreeGroup? : ((event: { source: Grid, groupers: (string|Function)[], oldGroupers: (string|Function)[] }) => void)|string
     /**
      * Fires when row locking is disabled.
      * @param {object} event Event object
@@ -1797,7 +1805,7 @@ export type BryntumGridBaseProps = {
     cellEditFeature? : object|boolean|string|GridCellEdit|GridCellEditConfig
     /**
      * Right click to display context menu for cells. To invoke the cell menu in a keyboard-accessible manner, use the
-     * `SPACE` key when the cell is focused.
+     * <kbd>Space</kbd> key when the cell is focused.
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Grid/feature/CellMenu)
      */
@@ -1897,8 +1905,8 @@ export type BryntumGridBaseProps = {
     filterBarFeature? : object|boolean|string|FilterBar|FilterBarConfig
     /**
      * Enables rendering and handling of row groups. The actual grouping is done in the store, but triggered by
-     * <kbd>shift</kbd> + clicking headers, or by using the context menu, or by using two finger tap (one on header,
-     * one anywhere on grid). Use <kbd>shift</kbd> + <kbd>alt</kbd> + click, or the context menu, to remove a column
+     * <kbd>Shift</kbd> + clicking headers, or by using the context menu, or by using two finger tap (one on header,
+     * one anywhere on grid). Use <kbd>Shift</kbd> + <kbd>Alt</kbd> + click, or the context menu, to remove a column
      * grouper.
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Grid/feature/Group)
@@ -2356,6 +2364,7 @@ export class BryntumGridBase extends React.Component<BryntumGridBaseProps> {
         'onToggleGroup',
         'onToggleNode',
         'onToolClick',
+        'onTreeGroup',
         'onUnlockRows',
         'onUnsplit',
         'preserveScroll',

package/src/BryntumGroupBar.tsx

@@ -530,7 +530,7 @@ export type BryntumGroupBarProps = {
      */
     title? : string
     /**
-     * Select/deselect all if `CMD`/`CTRL` is pressed when clicking
+     * Select/deselect all if <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> is pressed when clicking
      */
     toggleAllIfCtrlPressed? : boolean
     /**

package/src/BryntumHint.tsx

@@ -105,7 +105,7 @@ export type BryntumHintProps = {
      */
     catchEventHandlerExceptions? : boolean
     /**
-     * Close popup when `ESC` key is pressed.
+     * Close popup when <kbd>Escape</kbd> key is pressed.
      */
     closeOnEscape? : boolean
     /**

package/src/BryntumList.tsx

@@ -510,7 +510,7 @@ export type BryntumListProps = {
      */
     title? : string
     /**
-     * Select/deselect all if `CMD`/`CTRL` is pressed when clicking
+     * Select/deselect all if <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> is pressed when clicking
      */
     toggleAllIfCtrlPressed? : boolean
     /**

package/src/BryntumMenu.tsx

@@ -125,7 +125,7 @@ export type BryntumMenuProps = {
      */
     closeAction? : 'hide'|'destroy'
     /**
-     * Close popup when `ESC` key is pressed.
+     * Close popup when <kbd>Escape</kbd> key is pressed.
      */
     closeOnEscape? : boolean
     /**

package/src/BryntumModelCombo.tsx

@@ -181,7 +181,7 @@ export type BryntumModelComboProps = {
     contentElementCls? : string|object
     /**
      * If configured as `true`, this means that when an unmatched string is typed into the
-     * combo's input field, and `ENTER`, or the [multiValueSeparator](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-multiValueSeparator) is typed,
+     * combo's input field, and <kbd>Enter</kbd>, or the [multiValueSeparator](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-multiValueSeparator) is typed,
      * a new record will be created using the typed string as the [displayField](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-displayField).
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/SchedulerPro/widget/ModelCombo#config-createOnUnmatched)
@@ -676,7 +676,7 @@ export type BryntumModelComboProps = {
     required? : boolean
     /**
      * If this field is not [readOnly](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-readOnly), then setting this option means that pressing
-     * the `ESCAPE` key after editing the field will revert the field to the value it had when
+     * the <kbd>Escape</kbd> key after editing the field will revert the field to the value it had when
      * the user focused the field. If the field is *not* changed from when focused, the [clearable](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-clearable)
      * behaviour will be activated.
      */

package/src/BryntumNumberField.tsx

@@ -522,7 +522,7 @@ export type BryntumNumberFieldProps = {
     required? : boolean
     /**
      * If this field is not [readOnly](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-readOnly), then setting this option means that pressing
-     * the `ESCAPE` key after editing the field will revert the field to the value it had when
+     * the <kbd>Escape</kbd> key after editing the field will revert the field to the value it had when
      * the user focused the field. If the field is *not* changed from when focused, the [clearable](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-clearable)
      * behaviour will be activated.
      */

package/src/BryntumPasswordField.tsx

@@ -483,7 +483,7 @@ export type BryntumPasswordFieldProps = {
     required? : boolean
     /**
      * If this field is not [readOnly](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-readOnly), then setting this option means that pressing
-     * the `ESCAPE` key after editing the field will revert the field to the value it had when
+     * the <kbd>Escape</kbd> key after editing the field will revert the field to the value it had when
      * the user focused the field. If the field is *not* changed from when focused, the [clearable](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-clearable)
      * behaviour will be activated.
      */

package/src/BryntumProjectCombo.tsx

@@ -181,7 +181,7 @@ export type BryntumProjectComboProps = {
     contentElementCls? : string|object
     /**
      * If configured as `true`, this means that when an unmatched string is typed into the
-     * combo's input field, and `ENTER`, or the [multiValueSeparator](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-multiValueSeparator) is typed,
+     * combo's input field, and <kbd>Enter</kbd>, or the [multiValueSeparator](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-multiValueSeparator) is typed,
      * a new record will be created using the typed string as the [displayField](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-displayField).
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Scheduler/widget/ProjectCombo#config-createOnUnmatched)
@@ -680,7 +680,7 @@ export type BryntumProjectComboProps = {
     required? : boolean
     /**
      * If this field is not [readOnly](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-readOnly), then setting this option means that pressing
-     * the `ESCAPE` key after editing the field will revert the field to the value it had when
+     * the <kbd>Escape</kbd> key after editing the field will revert the field to the value it had when
      * the user focused the field. If the field is *not* changed from when focused, the [clearable](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-clearable)
      * behaviour will be activated.
      */

package/src/BryntumRadio.tsx

@@ -480,7 +480,7 @@ export type BryntumRadioProps = {
     required? : boolean
     /**
      * If this field is not [readOnly](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-readOnly), then setting this option means that pressing
-     * the `ESCAPE` key after editing the field will revert the field to the value it had when
+     * the <kbd>Escape</kbd> key after editing the field will revert the field to the value it had when
      * the user focused the field. If the field is *not* changed from when focused, the [clearable](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-clearable)
      * behaviour will be activated.
      */

package/src/BryntumRateTableField.tsx

@@ -181,7 +181,7 @@ export type BryntumRateTableFieldProps = {
     contentElementCls? : string|object
     /**
      * If configured as `true`, this means that when an unmatched string is typed into the
-     * combo's input field, and `ENTER`, or the [multiValueSeparator](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-multiValueSeparator) is typed,
+     * combo's input field, and <kbd>Enter</kbd>, or the [multiValueSeparator](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-multiValueSeparator) is typed,
      * a new record will be created using the typed string as the [displayField](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-displayField).
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/SchedulerPro/widget/RateTableField#config-createOnUnmatched)
@@ -676,7 +676,7 @@ export type BryntumRateTableFieldProps = {
     required? : boolean
     /**
      * If this field is not [readOnly](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-readOnly), then setting this option means that pressing
-     * the `ESCAPE` key after editing the field will revert the field to the value it had when
+     * the <kbd>Escape</kbd> key after editing the field will revert the field to the value it had when
      * the user focused the field. If the field is *not* changed from when focused, the [clearable](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-clearable)
      * behaviour will be activated.
      */

package/src/BryntumResourceCombo.tsx

@@ -181,7 +181,7 @@ export type BryntumResourceComboProps = {
     contentElementCls? : string|object
     /**
      * If configured as `true`, this means that when an unmatched string is typed into the
-     * combo's input field, and `ENTER`, or the [multiValueSeparator](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-multiValueSeparator) is typed,
+     * combo's input field, and <kbd>Enter</kbd>, or the [multiValueSeparator](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-multiValueSeparator) is typed,
      * a new record will be created using the typed string as the [displayField](https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#config-displayField).
      * ...
      * [View online docs...](https://bryntum.com/products/gantt/docs/api/Scheduler/widget/ResourceCombo#config-createOnUnmatched)
@@ -676,7 +676,7 @@ export type BryntumResourceComboProps = {
     required? : boolean
     /**
      * If this field is not [readOnly](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-readOnly), then setting this option means that pressing
-     * the `ESCAPE` key after editing the field will revert the field to the value it had when
+     * the <kbd>Escape</kbd> key after editing the field will revert the field to the value it had when
      * the user focused the field. If the field is *not* changed from when focused, the [clearable](https://bryntum.com/products/gantt/docs/api/Core/widget/Field#config-clearable)
      * behaviour will be activated.
      */

package/src/BryntumResourceEditor.tsx

@@ -125,7 +125,7 @@ export type BryntumResourceEditorProps = {
      */
     closeAction? : 'hide'|'destroy'
     /**
-     * Close popup when `ESC` key is pressed.
+     * Close popup when <kbd>Escape</kbd> key is pressed.
      */
     closeOnEscape? : boolean
     /**

package/src/BryntumResourceFilter.tsx

@@ -532,7 +532,7 @@ export type BryntumResourceFilterProps = {
      */
     title? : string
     /**
-     * Select/deselect all if `CMD`/`CTRL` is pressed when clicking
+     * Select/deselect all if <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> is pressed when clicking
      */
     toggleAllIfCtrlPressed? : boolean
     /**