@progress/kendo-react-grid 5.12.1-dev.202303210819 → 5.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/cdn/js/kendo-react-grid.js +1 -1
  2. package/dist/es/Grid.d.ts +5 -1
  3. package/dist/es/Grid.js +44 -8
  4. package/dist/es/interfaces/GridRowProps.d.ts +4 -0
  5. package/dist/es/package-metadata.js +1 -1
  6. package/dist/es/rows/GridRow.js +1 -1
  7. package/dist/npm/Grid.d.ts +5 -1
  8. package/dist/npm/Grid.js +44 -8
  9. package/dist/npm/interfaces/GridRowProps.d.ts +4 -0
  10. package/dist/npm/package-metadata.js +1 -1
  11. package/dist/npm/rows/GridRow.js +1 -1
  12. package/dist/systemjs/kendo-react-grid.js +1 -1
  13. package/package.json +18 -18
package/dist/es/Grid.d.ts CHANGED
@@ -35,7 +35,7 @@ import { GridColumnProps } from './interfaces/GridColumnProps';
35
35
  * ReactDOM.render(<App />, document.querySelector('my-app'));
36
36
  * ```
37
37
  */
38
- export declare class Grid extends React.Component<GridProps, {}> {
38
+ export declare class Grid extends React.Component<GridProps> {
39
39
  /**
40
40
  * @hidden
41
41
  */
@@ -170,8 +170,12 @@ export declare class Grid extends React.Component<GridProps, {}> {
170
170
  private forceUpdateTimeout;
171
171
  private isRtl;
172
172
  private _gridId;
173
+ private rowIndex;
173
174
  private get _header();
175
+ private observer;
174
176
  constructor(props: GridProps);
177
+ private handleIntersection;
178
+ private setCurrentOnTop;
175
179
  /**
176
180
  * Method to allow the scroll to be set to a specific row index.
177
181
  *
package/dist/es/Grid.js CHANGED
@@ -116,15 +116,22 @@ var Grid = /** @class */ (function (_super) {
116
116
  _this.forceUpdateTimeout = undefined;
117
117
  _this.isRtl = false;
118
118
  _this._gridId = guid();
119
- /**
120
- * Method to allow the scroll to be set to a specific row index.
121
- *
122
- * @param options - Object, containing the rowIndex to which is going to be scrolled.
123
- */
124
- _this.scrollIntoView = function (options) {
119
+ _this.observer = null;
120
+ _this.handleIntersection = function (entries) {
121
+ var options = { rowIndex: _this.rowIndex };
122
+ entries.forEach(function (entry) {
123
+ if (!entry.isIntersecting) {
124
+ _this.setCurrentOnTop(options);
125
+ }
126
+ });
127
+ };
128
+ _this.setCurrentOnTop = function (options) {
125
129
  if (!_this.vs.container || _this.props.scrollable === 'none') {
126
130
  return;
127
131
  }
132
+ if (_this.observer) {
133
+ _this.observer.disconnect();
134
+ }
128
135
  var rowIndex = options.rowIndex;
129
136
  if (_this.props.scrollable === 'virtual') {
130
137
  _this.vs.askedSkip = rowIndex;
@@ -133,12 +140,35 @@ var Grid = /** @class */ (function (_super) {
133
140
  else if (_this.element) {
134
141
  var selectedRow = rowIndex < 1
135
142
  ? _this.element.querySelector("tbody > tr:nth-child(".concat(1, ")"))
136
- : _this.element.querySelector("tbody > tr:nth-child(".concat(rowIndex, ")"));
143
+ : _this.element.querySelector("tbody > tr:nth-child(".concat(rowIndex + 1, ")"));
137
144
  if (selectedRow) {
138
145
  selectedRow.scrollIntoView(true);
139
146
  }
140
147
  }
141
148
  };
149
+ /**
150
+ * Method to allow the scroll to be set to a specific row index.
151
+ *
152
+ * @param options - Object, containing the rowIndex to which is going to be scrolled.
153
+ */
154
+ _this.scrollIntoView = function (options) {
155
+ if (!_this.vs.container || _this.props.scrollable === 'none') {
156
+ return;
157
+ }
158
+ _this.rowIndex = options.rowIndex;
159
+ var rowIndex = options.rowIndex;
160
+ var element = _this.element;
161
+ if (_this.observer && element) {
162
+ _this.observer.disconnect();
163
+ var target = element.querySelector("[absolute-row-index=\"".concat(rowIndex, "\"]"));
164
+ if (target) {
165
+ _this.observer.observe(target);
166
+ }
167
+ else {
168
+ _this.setCurrentOnTop(options);
169
+ }
170
+ }
171
+ };
142
172
  /**
143
173
  * Method to fit columns according to their content.
144
174
  *
@@ -519,6 +549,12 @@ var Grid = /** @class */ (function (_super) {
519
549
  if (this.isRtl) {
520
550
  this.forceUpdate();
521
551
  }
552
+ var observerOptions = {
553
+ rootMargin: '0px',
554
+ threshold: 0.9
555
+ };
556
+ this.observer = (canUseDOM && window.IntersectionObserver &&
557
+ new window.IntersectionObserver(this.handleIntersection, observerOptions) || null);
522
558
  };
523
559
  /**
524
560
  * @hidden
@@ -669,7 +705,7 @@ var Grid = /** @class */ (function (_super) {
669
705
  var detailRowId = rowId + '_1';
670
706
  var gridRow = dataRow(item, rowId, dataIndex_1);
671
707
  currentAriaRowIndex = absoluteIndex + rowIndexStart + detailRowCount_1;
672
- body.push((React.createElement(GridRow, { key: rowId, dataItem: item.dataItem, isAltRow: isAlt, isInEdit: gridRow.isInEdit, rowType: item.rowType, isHidden: hidden(rowIndex), onClick: function (e) { return _this.rowClick(e, item); }, onDoubleClick: function (e) { return _this.rowDblClick(e, item); }, selectedField: _this.props.selectedField, rowHeight: _this.props.rowHeight, render: _this.props.rowRender, ariaRowIndex: currentAriaRowIndex, dataIndex: dataIndex_1, isSelected: gridRow.isSelected }, gridRow.row)));
708
+ body.push((React.createElement(GridRow, { key: rowId, dataItem: item.dataItem, isAltRow: isAlt, isInEdit: gridRow.isInEdit, rowType: item.rowType, isHidden: hidden(rowIndex), onClick: function (e) { return _this.rowClick(e, item); }, onDoubleClick: function (e) { return _this.rowDblClick(e, item); }, selectedField: _this.props.selectedField, rowHeight: _this.props.rowHeight, render: _this.props.rowRender, ariaRowIndex: currentAriaRowIndex, absoluteRowIndex: absoluteIndex, dataIndex: dataIndex_1, isSelected: gridRow.isSelected }, gridRow.row)));
673
709
  if (_this.props.detail && item.rowType === 'data' && item.expanded) {
674
710
  var detailColspan = (leafColumns.length
675
711
  - (_this.props.expandField ? 1 : 0)
package/dist/es/interfaces/GridRowProps.d.ts CHANGED
@@ -57,4 +57,8 @@ export interface GridRowProps extends KendoReactComponentBaseProps {
57
57
  * Indicates if the row is selected.
58
58
  */
59
59
  isSelected: boolean;
60
+ /**
61
+ * @hidden
62
+ */
63
+ absoluteRowIndex: number;
60
64
  }
package/dist/es/package-metadata.js CHANGED
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-grid',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1679385613,
8
+ publishDate: 1680172407,
9
9
  version: '',
10
10
  licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
11
11
  };
package/dist/es/rows/GridRow.js CHANGED
@@ -54,7 +54,7 @@ var GridRow = /** @class */ (function (_super) {
54
54
  var defaultRendering = (React.createElement("tr", __assign({ id: this.props.id, onClick: this.props.onClick, onDoubleClick: this.props.onDoubleClick, className: className, style: {
55
55
  height: this.props.rowHeight ? this.props.rowHeight + 'px' : '',
56
56
  visibility: this.props.isHidden ? 'hidden' : ''
57
- }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, (_a = {}, _a[GRID_ROW_INDEX_ATTRIBUTE] = this.props.rowType === 'data' ? this.props.dataIndex : undefined, _a)), this.props.children));
57
+ }, role: "row", "aria-rowindex": this.props.ariaRowIndex, "absolute-row-index": this.props.absoluteRowIndex }, (_a = {}, _a[GRID_ROW_INDEX_ATTRIBUTE] = this.props.rowType === 'data' ? this.props.dataIndex : undefined, _a)), this.props.children));
58
58
  return this.props.render ?
59
59
  this.props.render.call(undefined, defaultRendering, this.props) :
60
60
  defaultRendering;
package/dist/npm/Grid.d.ts CHANGED
@@ -35,7 +35,7 @@ import { GridColumnProps } from './interfaces/GridColumnProps';
35
35
  * ReactDOM.render(<App />, document.querySelector('my-app'));
36
36
  * ```
37
37
  */
38
- export declare class Grid extends React.Component<GridProps, {}> {
38
+ export declare class Grid extends React.Component<GridProps> {
39
39
  /**
40
40
  * @hidden
41
41
  */
@@ -170,8 +170,12 @@ export declare class Grid extends React.Component<GridProps, {}> {
170
170
  private forceUpdateTimeout;
171
171
  private isRtl;
172
172
  private _gridId;
173
+ private rowIndex;
173
174
  private get _header();
175
+ private observer;
174
176
  constructor(props: GridProps);
177
+ private handleIntersection;
178
+ private setCurrentOnTop;
175
179
  /**
176
180
  * Method to allow the scroll to be set to a specific row index.
177
181
  *
package/dist/npm/Grid.js CHANGED
@@ -119,15 +119,22 @@ var Grid = /** @class */ (function (_super) {
119
119
  _this.forceUpdateTimeout = undefined;
120
120
  _this.isRtl = false;
121
121
  _this._gridId = (0, kendo_react_common_1.guid)();
122
- /**
123
- * Method to allow the scroll to be set to a specific row index.
124
- *
125
- * @param options - Object, containing the rowIndex to which is going to be scrolled.
126
- */
127
- _this.scrollIntoView = function (options) {
122
+ _this.observer = null;
123
+ _this.handleIntersection = function (entries) {
124
+ var options = { rowIndex: _this.rowIndex };
125
+ entries.forEach(function (entry) {
126
+ if (!entry.isIntersecting) {
127
+ _this.setCurrentOnTop(options);
128
+ }
129
+ });
130
+ };
131
+ _this.setCurrentOnTop = function (options) {
128
132
  if (!_this.vs.container || _this.props.scrollable === 'none') {
129
133
  return;
130
134
  }
135
+ if (_this.observer) {
136
+ _this.observer.disconnect();
137
+ }
131
138
  var rowIndex = options.rowIndex;
132
139
  if (_this.props.scrollable === 'virtual') {
133
140
  _this.vs.askedSkip = rowIndex;
@@ -136,12 +143,35 @@ var Grid = /** @class */ (function (_super) {
136
143
  else if (_this.element) {
137
144
  var selectedRow = rowIndex < 1
138
145
  ? _this.element.querySelector("tbody > tr:nth-child(".concat(1, ")"))
139
- : _this.element.querySelector("tbody > tr:nth-child(".concat(rowIndex, ")"));
146
+ : _this.element.querySelector("tbody > tr:nth-child(".concat(rowIndex + 1, ")"));
140
147
  if (selectedRow) {
141
148
  selectedRow.scrollIntoView(true);
142
149
  }
143
150
  }
144
151
  };
152
+ /**
153
+ * Method to allow the scroll to be set to a specific row index.
154
+ *
155
+ * @param options - Object, containing the rowIndex to which is going to be scrolled.
156
+ */
157
+ _this.scrollIntoView = function (options) {
158
+ if (!_this.vs.container || _this.props.scrollable === 'none') {
159
+ return;
160
+ }
161
+ _this.rowIndex = options.rowIndex;
162
+ var rowIndex = options.rowIndex;
163
+ var element = _this.element;
164
+ if (_this.observer && element) {
165
+ _this.observer.disconnect();
166
+ var target = element.querySelector("[absolute-row-index=\"".concat(rowIndex, "\"]"));
167
+ if (target) {
168
+ _this.observer.observe(target);
169
+ }
170
+ else {
171
+ _this.setCurrentOnTop(options);
172
+ }
173
+ }
174
+ };
145
175
  /**
146
176
  * Method to fit columns according to their content.
147
177
  *
@@ -522,6 +552,12 @@ var Grid = /** @class */ (function (_super) {
522
552
  if (this.isRtl) {
523
553
  this.forceUpdate();
524
554
  }
555
+ var observerOptions = {
556
+ rootMargin: '0px',
557
+ threshold: 0.9
558
+ };
559
+ this.observer = (kendo_react_common_1.canUseDOM && window.IntersectionObserver &&
560
+ new window.IntersectionObserver(this.handleIntersection, observerOptions) || null);
525
561
  };
526
562
  /**
527
563
  * @hidden
@@ -672,7 +708,7 @@ var Grid = /** @class */ (function (_super) {
672
708
  var detailRowId = rowId + '_1';
673
709
  var gridRow = dataRow(item, rowId, dataIndex_1);
674
710
  currentAriaRowIndex = absoluteIndex + rowIndexStart + detailRowCount_1;
675
- body.push((React.createElement(GridRow_1.GridRow, { key: rowId, dataItem: item.dataItem, isAltRow: isAlt, isInEdit: gridRow.isInEdit, rowType: item.rowType, isHidden: hidden(rowIndex), onClick: function (e) { return _this.rowClick(e, item); }, onDoubleClick: function (e) { return _this.rowDblClick(e, item); }, selectedField: _this.props.selectedField, rowHeight: _this.props.rowHeight, render: _this.props.rowRender, ariaRowIndex: currentAriaRowIndex, dataIndex: dataIndex_1, isSelected: gridRow.isSelected }, gridRow.row)));
711
+ body.push((React.createElement(GridRow_1.GridRow, { key: rowId, dataItem: item.dataItem, isAltRow: isAlt, isInEdit: gridRow.isInEdit, rowType: item.rowType, isHidden: hidden(rowIndex), onClick: function (e) { return _this.rowClick(e, item); }, onDoubleClick: function (e) { return _this.rowDblClick(e, item); }, selectedField: _this.props.selectedField, rowHeight: _this.props.rowHeight, render: _this.props.rowRender, ariaRowIndex: currentAriaRowIndex, absoluteRowIndex: absoluteIndex, dataIndex: dataIndex_1, isSelected: gridRow.isSelected }, gridRow.row)));
676
712
  if (_this.props.detail && item.rowType === 'data' && item.expanded) {
677
713
  var detailColspan = (leafColumns.length
678
714
  - (_this.props.expandField ? 1 : 0)
package/dist/npm/interfaces/GridRowProps.d.ts CHANGED
@@ -57,4 +57,8 @@ export interface GridRowProps extends KendoReactComponentBaseProps {
57
57
  * Indicates if the row is selected.
58
58
  */
59
59
  isSelected: boolean;
60
+ /**
61
+ * @hidden
62
+ */
63
+ absoluteRowIndex: number;
60
64
  }
package/dist/npm/package-metadata.js CHANGED
@@ -8,7 +8,7 @@ exports.packageMetadata = {
8
8
  name: '@progress/kendo-react-grid',
9
9
  productName: 'KendoReact',
10
10
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
11
- publishDate: 1679385613,
11
+ publishDate: 1680172407,
12
12
  version: '',
13
13
  licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
14
14
  };
package/dist/npm/rows/GridRow.js CHANGED
@@ -57,7 +57,7 @@ var GridRow = /** @class */ (function (_super) {
57
57
  var defaultRendering = (React.createElement("tr", __assign({ id: this.props.id, onClick: this.props.onClick, onDoubleClick: this.props.onDoubleClick, className: className, style: {
58
58
  height: this.props.rowHeight ? this.props.rowHeight + 'px' : '',
59
59
  visibility: this.props.isHidden ? 'hidden' : ''
60
- }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, (_a = {}, _a[constants_1.GRID_ROW_INDEX_ATTRIBUTE] = this.props.rowType === 'data' ? this.props.dataIndex : undefined, _a)), this.props.children));
60
+ }, role: "row", "aria-rowindex": this.props.ariaRowIndex, "absolute-row-index": this.props.absoluteRowIndex }, (_a = {}, _a[constants_1.GRID_ROW_INDEX_ATTRIBUTE] = this.props.rowType === 'data' ? this.props.dataIndex : undefined, _a)), this.props.children));
61
61
  return this.props.render ?
62
62
  this.props.render.call(undefined, defaultRendering, this.props) :
63
63
  defaultRendering;