@progress/kendo-react-grid 7.5.0-develop.16 → 7.5.0-develop.18

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 (15) hide show
  1. package/Grid.js +1 -1
  2. package/Grid.mjs +298 -270
  3. package/cells/GridCell.js +1 -1
  4. package/cells/GridCell.mjs +10 -9
  5. package/cells/GridGroupCell.js +1 -1
  6. package/cells/GridGroupCell.mjs +16 -15
  7. package/dist/cdn/js/kendo-react-grid.js +1 -1
  8. package/drag/GroupingIndicator.js +1 -1
  9. package/drag/GroupingIndicator.mjs +13 -9
  10. package/footer/FooterRow.js +1 -1
  11. package/footer/FooterRow.mjs +40 -35
  12. package/index.d.mts +4 -0
  13. package/index.d.ts +4 -0
  14. package/package-metadata.mjs +1 -1
  15. package/package.json +10 -10
package/Grid.mjs CHANGED
@@ -8,41 +8,41 @@
8
8
  "use client";
9
9
  import * as r from "react";
10
10
  import o from "prop-types";
11
- import { RowHeightService as re, dispatchEvent as Ge, canUseDOM as V, getActiveElement as Ke, memoizeOne as S, validatePackage as Oe, shouldShowValidationUI as Pe, setScrollbarWidth as ae, getter as Ve, classNames as F, kendoThemeMaps as G, WatermarkOverlay as Ue } from "@progress/kendo-react-common";
12
- import { tableKeyboardNavigation as x, getSelectionOptions as le, mapColumns as We, ClipboardService as Be, TableKeyboardNavigationContext as U, isRtl as $e, tableKeyboardNavigationTools as N, tableColumnsVirtualization as je, Pager as qe, tableKeyboardNavigationScopeAttributes as ne, TableSelection as he, tableKeyboardNavigationBodyAttributes as pe, DropClue as de, DragClue as ce, updateLeft as Xe, updateRight as Je } from "@progress/kendo-react-data-tools";
11
+ import { RowHeightService as re, dispatchEvent as Ge, canUseDOM as V, getActiveElement as Pe, memoizeOne as S, validatePackage as Ke, shouldShowValidationUI as Oe, setScrollbarWidth as ae, getter as Ve, classNames as N, kendoThemeMaps as G, WatermarkOverlay as Ue } from "@progress/kendo-react-common";
12
+ import { tableKeyboardNavigation as x, getSelectionOptions as le, mapColumns as We, ClipboardService as Be, TableKeyboardNavigationContext as U, isRtl as $e, tableKeyboardNavigationTools as _, tableColumnsVirtualization as je, Pager as qe, tableKeyboardNavigationScopeAttributes as ne, TableSelection as he, tableKeyboardNavigationBodyAttributes as pe, DropClue as de, DragClue as ce, updateLeft as Xe, updateRight as Ye, KEYBOARD_NAV_DATA_ID as Je } from "@progress/kendo-react-data-tools";
13
13
  import { GridSelectionCell as Qe } from "./cells/GridSelectionCell.mjs";
14
- import { GridHierarchyCell as Ye } from "./cells/GridHierarchyCell.mjs";
15
- import { GridEditCell as Ze } from "./cells/GridEditCell.mjs";
16
- import { Header as et } from "./header/Header.mjs";
17
- import { HeaderRow as tt } from "./header/HeaderRow.mjs";
18
- import { FilterRow as st } from "./header/FilterRow.mjs";
19
- import { GroupPanel as it } from "./header/GroupPanel.mjs";
20
- import { Footer as ot } from "./footer/Footer.mjs";
21
- import { provideLocalizationService as rt, registerForLocalization as at } from "@progress/kendo-react-intl";
22
- import { pagerMessagesMap as lt, gridAriaLabel as ue, messages as nt } from "./messages/index.mjs";
23
- import { VirtualScroll as ht } from "./VirtualScroll.mjs";
14
+ import { GridHierarchyCell as Ze } from "./cells/GridHierarchyCell.mjs";
15
+ import { GridEditCell as et } from "./cells/GridEditCell.mjs";
16
+ import { Header as tt } from "./header/Header.mjs";
17
+ import { HeaderRow as st } from "./header/HeaderRow.mjs";
18
+ import { FilterRow as it } from "./header/FilterRow.mjs";
19
+ import { GroupPanel as ot } from "./header/GroupPanel.mjs";
20
+ import { Footer as rt } from "./footer/Footer.mjs";
21
+ import { provideLocalizationService as at, registerForLocalization as lt } from "@progress/kendo-react-intl";
22
+ import { pagerMessagesMap as nt, gridAriaLabel as ue, messages as ht } from "./messages/index.mjs";
23
+ import { VirtualScroll as pt } from "./VirtualScroll.mjs";
24
24
  import { VirtualScrollFixed as ge } from "./VirtualScrollFixed.mjs";
25
- import { ColumnResize as pt } from "./drag/ColumnResize.mjs";
26
- import { CommonDragLogic as dt } from "./drag/CommonDragLogic.mjs";
27
- import { firefox as me, firefoxMaxHeight as fe, flatData as ct, readColumns as ut, sanitizeColumns as gt, getColumnWidth as W, autoGenerateColumns as mt, getNestedValue as be, resolveCells as ft } from "./utils/index.mjs";
25
+ import { ColumnResize as dt } from "./drag/ColumnResize.mjs";
26
+ import { CommonDragLogic as ct } from "./drag/CommonDragLogic.mjs";
27
+ import { firefox as fe, firefoxMaxHeight as me, flatData as ut, readColumns as gt, sanitizeColumns as ft, getColumnWidth as W, autoGenerateColumns as mt, getNestedValue as ve, resolveCells as vt } from "./utils/index.mjs";
28
28
  import { GridCell as bt } from "./cells/GridCell.mjs";
29
- import { GridGroupCell as ve } from "./cells/GridGroupCell.mjs";
30
- import { GridRow as vt } from "./rows/GridRow.mjs";
31
- import { GridHeaderSelectionCell as Ct } from "./header/GridHeaderSelectionCell.mjs";
32
- import { GridNoRecords as Rt } from "./GridNoRecords.mjs";
29
+ import { GridGroupCell as be } from "./cells/GridGroupCell.mjs";
30
+ import { GridRow as Ct } from "./rows/GridRow.mjs";
31
+ import { GridHeaderSelectionCell as Rt } from "./header/GridHeaderSelectionCell.mjs";
32
+ import { GridNoRecords as yt } from "./GridNoRecords.mjs";
33
33
  import { operators as Ce } from "./filterCommon.mjs";
34
- import { FooterRow as yt } from "./footer/FooterRow.mjs";
35
- import { normalize as wt } from "./paging/GridPagerSettings.mjs";
34
+ import { FooterRow as wt } from "./footer/FooterRow.mjs";
35
+ import { normalize as St } from "./paging/GridPagerSettings.mjs";
36
36
  import { packageMetadata as Re } from "./package-metadata.mjs";
37
- import { GridDetailCell as St } from "./cells/GridDetailCell.mjs";
38
- import { GridDetailHierarchyCell as It } from "./cells/GridDetailHierarchyCell.mjs";
39
- import { SAFARI_REGEX as kt } from "./constants/index.mjs";
40
- const _ = class _ extends r.Component {
37
+ import { GridDetailCell as It } from "./cells/GridDetailCell.mjs";
38
+ import { GridDetailHierarchyCell as kt } from "./cells/GridDetailHierarchyCell.mjs";
39
+ import { SAFARI_REGEX as Et } from "./constants/index.mjs";
40
+ const T = class T extends r.Component {
41
41
  constructor(a) {
42
- super(a), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._shouldUpdateLeftRight = !0, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this._data = [], this._slicedData = void 0, this.wrapperScrollTop = 0, this.showLicenseWatermark = !1, this.headerRef = r.createRef(), this.headerElementRef = r.createRef(), this._element = null, this.tableElement = null, this.containerRef = r.createRef(), this.tableBodyRef = r.createRef(), this._footer = null, this.forceUpdateTimeout = void 0, this.isRtl = !1, this.headTable = null, this.observer = null, this.handleIntersection = (e) => {
42
+ super(a), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._focusFirst = !1, this._shouldUpdateLeftRight = !0, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this._data = [], this._slicedData = void 0, this.wrapperScrollTop = 0, this.showLicenseWatermark = !1, this.headerRef = r.createRef(), this.headerElementRef = r.createRef(), this._element = null, this.tableElement = null, this.containerRef = r.createRef(), this.tableBodyRef = r.createRef(), this._footer = null, this.forceUpdateTimeout = void 0, this.isRtl = !1, this.headTable = null, this.observer = null, this.handleIntersection = (e) => {
43
43
  const t = { rowIndex: this.rowIndex };
44
- e.forEach((i) => {
45
- i.isIntersecting || this.setCurrentOnTop(t);
44
+ e.forEach((s) => {
45
+ s.isIntersecting || this.setCurrentOnTop(t);
46
46
  });
47
47
  }, this.setCurrentOnTop = (e) => {
48
48
  if (!this.vs.container || this.props.scrollable === "none")
@@ -52,35 +52,35 @@ const _ = class _ extends r.Component {
52
52
  if (this.props.scrollable === "virtual")
53
53
  this.vs.askedSkip = t, this.vs.container.scroll(0, Math.round(this.vs.askedSkip / this.vs.total * this.vs.container.scrollHeight));
54
54
  else if (this.element) {
55
- const i = t < 1 ? this.element.querySelector("tbody > tr:nth-child(1)") : this.element.querySelector(`tbody > tr:nth-child(${t + 1})`);
56
- i && this.containerRef.current && (this.containerRef.current.scrollTop = i.offsetTop);
55
+ const s = t < 1 ? this.element.querySelector("tbody > tr:nth-child(1)") : this.element.querySelector(`tbody > tr:nth-child(${t + 1})`);
56
+ s && this.containerRef.current && (this.containerRef.current.scrollTop = s.offsetTop);
57
57
  }
58
58
  }, this.scrollIntoView = (e) => {
59
59
  if (!this.vs.container || this.props.scrollable === "none")
60
60
  return;
61
61
  this.rowIndex = e.rowIndex;
62
- const { rowIndex: t } = e, i = this.element;
63
- if (this.observer && i) {
62
+ const { rowIndex: t } = e, s = this.element;
63
+ if (this.observer && s) {
64
64
  this.observer.disconnect();
65
- const n = i.querySelector(`[absolute-row-index="${t}"]`);
66
- n ? this.observer.observe(n) : this.setCurrentOnTop(e);
65
+ const l = s.querySelector(`[absolute-row-index="${t}"]`);
66
+ l ? this.observer.observe(l) : this.setCurrentOnTop(e);
67
67
  }
68
68
  }, this.fitColumns = (e) => {
69
69
  this.columnResize.dblClickHandler(null, e);
70
- }, this.onContextMenu = (e, t, i) => {
70
+ }, this.onContextMenu = (e, t, s) => {
71
71
  if (this.props.onContextMenu) {
72
- const n = {
72
+ const l = {
73
73
  target: this,
74
74
  syntheticEvent: e,
75
75
  nativeEvent: e.nativeEvent,
76
76
  dataItem: t,
77
- field: i
77
+ field: s
78
78
  };
79
- this.props.onContextMenu.call(void 0, n);
79
+ this.props.onContextMenu.call(void 0, l);
80
80
  }
81
81
  }, this.getVirtualScroll = (e) => {
82
- const { rowHeight: t, detailRowHeight: i, detail: n, expandField: h, groupable: l } = e, d = this.isAllData(), f = t !== void 0 && t > 0, R = i !== void 0 && i > 0, k = l === !0 || typeof l == "object" && l.enabled !== !1;
83
- return !f || k && !d || !!(n && h) && (!R || !d) ? ht : ge;
82
+ const { rowHeight: t, detailRowHeight: s, detail: l, expandField: p, groupable: n } = e, d = this.isAllData(), m = t !== void 0 && t > 0, R = s !== void 0 && s > 0, k = n === !0 || typeof n == "object" && n.enabled !== !1;
83
+ return !m || k && !d || !!(l && p) && (!R || !d) ? pt : ge;
84
84
  }, this.isAllData = () => {
85
85
  const { data: e, total: t } = this.props;
86
86
  return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
@@ -93,46 +93,54 @@ const _ = class _ extends r.Component {
93
93
  this.props.sort,
94
94
  t || this.props.rowHeight === void 0 || this.props.rowHeight === 0
95
95
  ), this.vs.fixedScroll = this.props.fixedScroll || !1, this.vs.PageChange = this.pageChange, this.vs.realSkip = this.props.skip || 0, this.vs.pageSize = (this.props.take !== void 0 ? this.props.take : this.props.pageSize) || 0, this.vs.scrollableVirtual = this.props.scrollable === "virtual", this.vs.total = e, this.vs.propsSkip = (this.props.skip || 0) + (this.props.scrollable === "virtual" ? this.vs.topCacheCount + (this.vs.attendedSkip - (this.props.skip || 0)) : 0), this.props.rowHeight !== void 0 && this.props.rowHeight > 0 && !t) {
96
- const i = this.props.rowHeight * e;
97
- this.vs.containerHeight = me ? Math.min(fe, i) : i;
96
+ const s = this.props.rowHeight * e;
97
+ this.vs.containerHeight = fe ? Math.min(me, s) : s;
98
98
  } else
99
99
  this.vs.containerHeight = 1533915;
100
100
  if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof ge) {
101
- const { rowHeight: i = 0, detail: n, expandField: h } = this.props;
102
- let { detailRowHeight: l = 0 } = this.props;
103
- l = n && h ? l : i, this.isAllData() ? (this.vs.total = this._data.length, this._slicedData = this._data.slice(this.vs.realSkip, this.vs.realSkip + this.vs.pageSize), this.vs.rowHeightService = this.rowHeightService(this.vs, this._data.length, i, l, this._data)) : this.vs.rowHeightService = new re(e, i, l);
101
+ const { rowHeight: s = 0, detail: l, expandField: p } = this.props;
102
+ let { detailRowHeight: n = 0 } = this.props;
103
+ n = l && p ? n : s, this.isAllData() ? (this.vs.total = this._data.length, this._slicedData = this._data.slice(this.vs.realSkip, this.vs.realSkip + this.vs.pageSize), this.vs.rowHeightService = this.rowHeightService(this.vs, this._data.length, s, n, this._data)) : this.vs.rowHeightService = new re(e, s, n);
104
104
  const d = this.vs.rowHeightService.totalHeight();
105
- this.vs.containerHeight = me ? Math.min(fe, d) : d;
105
+ this.vs.containerHeight = fe ? Math.min(me, d) : d;
106
106
  }
107
107
  }, this.scrollHandler = (e) => {
108
108
  if (e.target !== e.currentTarget)
109
109
  return;
110
110
  clearTimeout(this.forceUpdateTimeout), this.vs.table = this.tableElement;
111
- const t = e.currentTarget.scrollLeft, i = e.currentTarget.scrollTop;
112
- this.props.columnVirtualization && (!this.vs.scrollableVirtual || i === this.wrapperScrollTop) && (this.forceUpdateTimeout = window.setTimeout(() => {
111
+ const t = e.currentTarget.scrollLeft, s = e.currentTarget.scrollTop;
112
+ this.props.columnVirtualization && (!this.vs.scrollableVirtual || s === this.wrapperScrollTop) && (this.forceUpdateTimeout = window.setTimeout(() => {
113
113
  this.forceUpdate();
114
- }, 0)), this._header && this._header.setScrollLeft(t), this._footer && this._footer.setScrollLeft(t), this.vs && i !== this.wrapperScrollTop && this.vs.scrollHandler(e), Ge(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = i;
114
+ }, 0)), this._header && this._header.setScrollLeft(t), this._footer && this._footer.setScrollLeft(t), this.vs && s !== this.wrapperScrollTop && this.vs.scrollHandler(e), Ge(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = s;
115
115
  }, this.onKeyDown = (e) => {
116
116
  if (x.onKeyDown(e, {
117
117
  contextStateRef: this.contextStateRef,
118
118
  navigationStateRef: this.navigationStateRef,
119
119
  onNavigationAction: this.onNavigationAction
120
120
  }), this.props.onKeyDown) {
121
- const { mode: t, cell: i } = le(this.props.selectable), n = {
121
+ const { mode: t, cell: s } = le(this.props.selectable), l = {
122
122
  dataItems: this.getLeafDataItems(),
123
123
  mode: t,
124
- cell: i,
124
+ cell: s,
125
125
  componentId: this._gridId,
126
126
  selectedField: this.props.selectedField,
127
127
  ...this.getArguments(e)
128
128
  };
129
- this.props.onKeyDown.call(void 0, n);
129
+ this.props.onKeyDown.call(void 0, l);
130
130
  }
131
131
  }, this.onFocus = (e) => {
132
132
  x.onFocus(e, {
133
133
  contextStateRef: this.contextStateRef
134
134
  });
135
135
  }, this.onNavigationAction = (e) => {
136
+ if (e.action === "moveToNextPage" && this.moveToNextPage(e.event), e.action === "moveToPrevPage" && this.moveToPrevPage(e.event), e.focusElement && e.action === "reorderToRight") {
137
+ const t = parseInt(e.focusElement.ariaColIndex, 10) - 1;
138
+ t < this._columns.length - 1 && this.columnReorder(t, t + 1, e.event);
139
+ }
140
+ if (e.focusElement && e.action === "reorderToLeft") {
141
+ const t = parseInt(e.focusElement.ariaColIndex, 10) - 1;
142
+ t > 0 && this.columnReorder(t, t - 1, e.event);
143
+ }
136
144
  if (this.props.onNavigationAction) {
137
145
  const t = {
138
146
  focusElement: e.focusElement,
@@ -159,8 +167,8 @@ const _ = class _ extends r.Component {
159
167
  }, this.itemChange = (e) => {
160
168
  const t = this.props.onItemChange;
161
169
  if (e.field === this.props.expandField || this.props.group && e.field === void 0) {
162
- const i = this.props.onExpandChange;
163
- i && i.call(
170
+ const s = this.props.onExpandChange;
171
+ s && s.call(
164
172
  void 0,
165
173
  {
166
174
  ...this.getArguments(e.syntheticEvent),
@@ -194,7 +202,7 @@ const _ = class _ extends r.Component {
194
202
  );
195
203
  }, this.selectionRelease = (e) => {
196
204
  if (this.props.onSelectionChange) {
197
- const t = this.getSlicedLeafDataItems()[e.startRowIndex], i = this.getSlicedLeafDataItems()[e.endRowIndex], n = {
205
+ const t = this.getSlicedLeafDataItems()[e.startRowIndex], s = this.getSlicedLeafDataItems()[e.endRowIndex], l = {
198
206
  syntheticEvent: void 0,
199
207
  target: this,
200
208
  selectedField: this.props.selectedField || "",
@@ -202,19 +210,28 @@ const _ = class _ extends r.Component {
202
210
  dataItems: this.getLeafDataItems(),
203
211
  dataItem: null,
204
212
  startDataItem: t,
205
- endDataItem: i,
213
+ endDataItem: s,
206
214
  ...e
207
215
  };
208
- this.props.onSelectionChange.call(void 0, n);
216
+ this.props.onSelectionChange.call(void 0, l);
209
217
  }
210
- }, this.pageChange = (e, t, i) => {
218
+ }, this.pageChange = (e, t, s) => {
211
219
  this.raiseDataEvent(
212
220
  this.props.onPageChange,
213
221
  { page: e },
214
222
  { skip: e.skip, take: e.take },
215
223
  t,
216
- i
224
+ s
217
225
  );
226
+ }, this.getTotal = () => {
227
+ let e = this.props.total || 0;
228
+ return Array.isArray(this.props.data) ? e = e || this.props.data.length : this.props.data && (e = e || this.props.data.total), e;
229
+ }, this.moveToNextPage = (e) => {
230
+ const t = this.props.take || 0, s = (this.props.skip || 0) + t, l = this.getTotal();
231
+ s < l && this.pageChange({ skip: s, take: t }, e);
232
+ }, this.moveToPrevPage = (e) => {
233
+ const t = this.props.take || 0, s = (this.props.skip || 0) - t;
234
+ s >= 0 && this.pageChange({ skip: s, take: t }, e);
218
235
  }, this.pagerPageChange = (e) => {
219
236
  this.pageChange({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
220
237
  }, this.sortChange = (e, t) => {
@@ -232,12 +249,12 @@ const _ = class _ extends r.Component {
232
249
  t
233
250
  );
234
251
  }, this.groupChange = (e, t) => {
235
- const i = t.nativeEvent ? t : { nativeEvent: t.nativeEvent || t.originalEvent };
236
- this.raiseDataEvent(
252
+ const s = t.nativeEvent ? t : { nativeEvent: t.nativeEvent || t.originalEvent };
253
+ e.length === 0 && this.props.navigatable && (this._focusFirst = !0), this.raiseDataEvent(
237
254
  this.props.onGroupChange,
238
255
  { group: e },
239
256
  { group: e, skip: 0 },
240
- i
257
+ s
241
258
  );
242
259
  }, this.onClipboard = (e, t) => {
243
260
  if (this.props.onClipboard) {
@@ -255,51 +272,51 @@ const _ = class _ extends r.Component {
255
272
  );
256
273
  }
257
274
  }, this.inActiveElement = () => {
258
- var h, l, d;
275
+ var p, n, d;
259
276
  if (!V)
260
277
  return !1;
261
- const e = Ke(this.document), t = e ? e.matches(".k-table-td") ? e : (h = this.document) == null ? void 0 : h.body : (l = this.document) == null ? void 0 : l.body, i = t.closest(".k-grid-container"), n = t && ((d = this._element) == null ? void 0 : d.contains(t));
262
- return !!(t && n && i);
263
- }, this.onResize = (e, t, i, n, h, l) => {
278
+ const e = Pe(this.document), t = e ? e.matches(".k-table-td") ? e : (p = this.document) == null ? void 0 : p.body : (n = this.document) == null ? void 0 : n.body, s = t.closest(".k-grid-container"), l = t && ((d = this._element) == null ? void 0 : d.contains(t));
279
+ return !!(t && l && s);
280
+ }, this.onResize = (e, t, s, l, p, n) => {
264
281
  this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(
265
282
  void 0,
266
283
  {
267
284
  columns: this.columns,
268
- nativeEvent: n,
269
- targetColumnId: l,
285
+ nativeEvent: l,
286
+ targetColumnId: n,
270
287
  index: e,
271
288
  newWidth: t,
272
- oldWidth: i,
273
- end: h,
289
+ oldWidth: s,
290
+ end: p,
274
291
  target: this
275
292
  }
276
293
  );
277
- }, this.reInitVirtualization = S((e, t, i, n, h, l) => {
294
+ }, this.reInitVirtualization = S((e, t, s, l, p, n) => {
278
295
  this.vs.reset();
279
296
  const d = this.getVirtualScroll(this.props);
280
- this.vs = new d(l);
281
- }), this.flatData = S((e, t, i, n, h, l, d) => {
282
- const f = [], R = ct(
283
- f,
297
+ this.vs = new d(n);
298
+ }), this.flatData = S((e, t, s, l, p, n, d) => {
299
+ const m = [], R = ut(
300
+ m,
284
301
  e,
285
302
  t,
286
- { index: i },
287
- n !== void 0,
288
- h
303
+ { index: s },
304
+ l !== void 0,
305
+ p
289
306
  );
290
- return { flattedData: f, resolvedGroupsCount: R };
291
- }), this.rowHeightService = S((e, t, i, n, h) => new re(t, i, n, h)), this.childrenToArray = S((e) => r.Children.toArray(e)), this.readColumns = S(
292
- (e, t, i) => {
293
- const n = e.filter((h) => h && h.type && h.type.displayName === "KendoReactGridColumn");
294
- return ut(n, this.columns, { prevId: 0, idPrefix: t });
307
+ return { flattedData: m, resolvedGroupsCount: R };
308
+ }), this.rowHeightService = S((e, t, s, l, p) => new re(t, s, l, p)), this.childrenToArray = S((e) => r.Children.toArray(e)), this.readColumns = S(
309
+ (e, t, s) => {
310
+ const l = e.filter((p) => p && p.type && p.type.displayName === "KendoReactGridColumn");
311
+ return gt(l, this.columns, { prevId: 0, idPrefix: t });
295
312
  }
296
313
  ), this.mapColumns = S(
297
314
  (e, t) => We(e, t)
298
- ), this.configureColumns = S((e, t, i) => {
299
- this.props.selectedField && e.filter((l) => l.field === this.props.selectedField).forEach((l) => {
300
- l.width = l.width || "50px", l.cell = l.cell || Qe, l.headerCell = l.headerCell || Ct;
315
+ ), this.configureColumns = S((e, t, s) => {
316
+ this.props.selectedField && e.filter((n) => n.field === this.props.selectedField).forEach((n) => {
317
+ n.width = n.width || "50px", n.cell = n.cell || Qe, n.headerCell = n.headerCell || Rt;
301
318
  });
302
- const n = {
319
+ const l = {
303
320
  id: "",
304
321
  resizable: !0,
305
322
  width: "32px",
@@ -318,34 +335,34 @@ const _ = class _ extends r.Component {
318
335
  ariaColumnIndex: 0,
319
336
  isAccessible: !0
320
337
  };
321
- let h = 0;
338
+ let p = 0;
322
339
  this.props.expandField && this.props.onExpandChange && this.props.detail && (e.unshift({
323
- ...n,
324
- cell: Ye,
340
+ ...l,
341
+ cell: Ze,
325
342
  field: this.props.expandField,
326
343
  headerClassName: "k-hierarchy-cell k-header"
327
- }), h++);
328
- for (let l = 0; l < t; l++)
344
+ }), p++);
345
+ for (let n = 0; n < t; n++)
329
346
  e.unshift({
330
- ...n,
347
+ ...l,
331
348
  isAccessible: !1,
332
- cell: ve,
349
+ cell: be,
333
350
  field: "value",
334
351
  locked: this.props.lockGroups
335
- }), h++;
336
- e.slice(h).forEach((l) => l.parentIndex >= 0 && (l.parentIndex += h));
337
- }), this.getHeaderRow = S((e, t, i, n, h, l, d, f, R, k, z, C) => /* @__PURE__ */ r.createElement(
338
- tt,
352
+ }), p++;
353
+ e.slice(p).forEach((n) => n.parentIndex >= 0 && (n.parentIndex += p));
354
+ }), this.getHeaderRow = S((e, t, s, l, p, n, d, m, R, k, z, C) => /* @__PURE__ */ r.createElement(
355
+ st,
339
356
  {
340
357
  cells: this.props.cells,
341
358
  sort: e,
342
359
  sortable: t,
343
360
  sortChange: this.sortChange,
344
- group: i || [],
345
- groupable: n,
361
+ group: s || [],
362
+ groupable: l,
346
363
  groupChange: this.groupChange,
347
- filter: h,
348
- filterable: l,
364
+ filter: p,
365
+ filterable: n,
349
366
  filterOperators: d,
350
367
  filterChange: this.filterChange,
351
368
  columnMenu: R,
@@ -356,7 +373,7 @@ const _ = class _ extends r.Component {
356
373
  dragHandler: this.dragLogic.dragHandler,
357
374
  releaseHandler: this.dragLogic.releaseHandler,
358
375
  columnsMap: z,
359
- cellRender: f,
376
+ cellRender: m,
360
377
  isRtl: C,
361
378
  dragClue: this.dragLogic.dragClueRef,
362
379
  headerRef: this.headerElementRef,
@@ -365,15 +382,15 @@ const _ = class _ extends r.Component {
365
382
  columnGroupChange: this.columnGroupChange
366
383
  }
367
384
  )), this.resolveTitle = (e) => {
368
- const t = this._columns.find((n) => n.field === e), i = t && (t.title || t.field);
369
- return i === void 0 ? e : i;
370
- }, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), this.getSlicedLeafDataItems = () => (this._slicedData || this._data).filter((e) => e.rowType === "data").map((e) => e.dataItem), Oe(Re), this.showLicenseWatermark = Pe(Re);
371
- const p = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1, c = this.getVirtualScroll(a);
372
- this.vs = new c(p || a.rowHeight === void 0 || a.rowHeight === 0), this.dragLogic = new dt(
385
+ const t = this._columns.find((l) => l.field === e), s = t && (t.title || t.field);
386
+ return s === void 0 ? e : s;
387
+ }, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), this.getSlicedLeafDataItems = () => (this._slicedData || this._data).filter((e) => e.rowType === "data").map((e) => e.dataItem), Ke(Re), this.showLicenseWatermark = Oe(Re);
388
+ const h = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1, c = this.getVirtualScroll(a);
389
+ this.vs = new c(h || a.rowHeight === void 0 || a.rowHeight === 0), this.dragLogic = new ct(
373
390
  this.columnReorder.bind(this),
374
391
  this.groupReorder.bind(this),
375
392
  this.columnToGroup.bind(this)
376
- ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new pt(this.onResize), this.props.clipboard && (this.clipboardService = new Be(this.onClipboard)), x.onConstructor({
393
+ ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new dt(this.onResize), this.props.clipboard && (this.clipboardService = new Be(this.onClipboard)), x.onConstructor({
377
394
  navigatable: !!a.navigatable,
378
395
  contextStateRef: this.contextStateRef,
379
396
  navigationStateRef: this.navigationStateRef,
@@ -421,8 +438,8 @@ const _ = class _ extends r.Component {
421
438
  */
422
439
  // tslint:enable:max-line-length
423
440
  get columns() {
424
- const a = this._columns.filter((p) => p.declarationIndex >= 0 && p.parentIndex === -1);
425
- return gt(a);
441
+ const a = this._columns.filter((h) => h.declarationIndex >= 0 && h.parentIndex === -1);
442
+ return ft(a);
426
443
  }
427
444
  /**
428
445
  * Returns the HTML element of the Grid component.
@@ -444,18 +461,18 @@ const _ = class _ extends r.Component {
444
461
  * @hidden
445
462
  */
446
463
  componentDidMount() {
447
- navigator.userAgent.match(kt) || (this.headTable && (this.headTable.style.display = "block"), this.tableElement && (this.tableElement.style.display = "block")), this.resetTableWidth(), ae();
464
+ this.props.columnVirtualization && !navigator.userAgent.match(Et) && (this.headTable && (this.headTable.style.display = "block"), this.tableElement && (this.tableElement.style.display = "block")), this.resetTableWidth(), ae();
448
465
  const a = $e(this.element);
449
466
  this.isRtl = a, x.onComponentDidMount({
450
467
  scope: this.element || void 0,
451
468
  contextStateRef: this.contextStateRef,
452
469
  navigationStateRef: this.navigationStateRef
453
470
  }), this.isRtl && this.forceUpdate();
454
- const p = {
471
+ const h = {
455
472
  rootMargin: "0px",
456
473
  threshold: 0.9
457
474
  };
458
- this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = V && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, p) || null;
475
+ this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = V && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, h) || null;
459
476
  }
460
477
  /**
461
478
  * @hidden
@@ -474,8 +491,9 @@ const _ = class _ extends r.Component {
474
491
  this.resetTableWidth(), ae(), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), x.onComponentDidUpdate({
475
492
  scope: this.element || void 0,
476
493
  contextStateRef: this.contextStateRef,
477
- navigationStateRef: this.navigationStateRef
478
- });
494
+ navigationStateRef: this.navigationStateRef,
495
+ focusFirst: this._focusFirst
496
+ }), this._focusFirst = !1;
479
497
  }
480
498
  /**
481
499
  * @hidden
@@ -489,10 +507,10 @@ const _ = class _ extends r.Component {
489
507
  render() {
490
508
  var ie;
491
509
  let a = this.props.total || 0;
492
- const p = N.getIdPrefix(this.navigationStateRef), c = rt(this);
510
+ const h = _.getIdPrefix(this.navigationStateRef), c = at(this);
493
511
  let e = [];
494
512
  Array.isArray(this.props.data) ? (e = this.props.data, a = a || this.props.data.length) : this.props.data && (e = this.props.data.data, a = a || this.props.data.total);
495
- const t = typeof this.props.groupable == "object" && this.props.groupable.footer || "none", i = this.props.scrollable === "virtual", { resolvedGroupsCount: n, flattedData: h } = this.flatData(
513
+ const t = typeof this.props.groupable == "object" && this.props.groupable.footer || "none", s = this.props.scrollable === "virtual", { resolvedGroupsCount: l, flattedData: p } = this.flatData(
496
514
  e,
497
515
  t,
498
516
  this.props.skip || 0,
@@ -501,15 +519,15 @@ const _ = class _ extends r.Component {
501
519
  this.props.filter,
502
520
  this.props.sort
503
521
  );
504
- this._data = h;
505
- const l = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1;
506
- this.columnResize.resizable = this.props.resizable || !1, this.dragLogic.reorderable = this.props.reorderable || !1, this.dragLogic.groupable = l;
522
+ this._data = p;
523
+ const n = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1;
524
+ this.columnResize.resizable = this.props.resizable || !1, this.dragLogic.reorderable = this.props.reorderable || !1, this.dragLogic.groupable = n;
507
525
  const d = this.props.selectable && this.props.selectable.drag ? "none" : void 0;
508
- this.initializeVirtualization(a, l);
509
- const f = this.childrenToArray(this.props.children);
510
- this.initColumns(f, n);
511
- const R = f.map((s) => s && s.type && s.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(s, { ...s.props, ariaControls: this._gridId }) : null), k = f.filter((s) => s && s.type && s.type.displayName === "KendoReactGridNoRecords"), z = f.filter((s) => s && s.type && s.type.displayName === "KendoReactGridStatusBar"), C = this._columns.filter((s) => s.children.length === 0), $ = l && /* @__PURE__ */ r.createElement(
512
- it,
526
+ this.initializeVirtualization(a, n);
527
+ const m = this.childrenToArray(this.props.children);
528
+ this.initColumns(m, l);
529
+ const R = m.map((i) => i && i.type && i.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(i, { ...i.props, ariaControls: this._gridId }) : null), k = m.filter((i) => i && i.type && i.type.displayName === "KendoReactGridNoRecords"), z = m.filter((i) => i && i.type && i.type.displayName === "KendoReactGridStatusBar"), C = this._columns.filter((i) => i.children.length === 0), $ = n && /* @__PURE__ */ r.createElement(
530
+ ot,
513
531
  {
514
532
  group: this.props.group || [],
515
533
  groupChange: this.groupChange,
@@ -522,20 +540,20 @@ const _ = class _ extends r.Component {
522
540
  onContextMenu: this.onContextMenu
523
541
  }
524
542
  ), { sort: ye, sortable: we, group: Se, filter: Ie, filterable: ke, filterOperators: Ee = Ce, headerCellRender: xe, columnMenu: _e } = this.props, j = /* @__PURE__ */ r.createElement(
525
- et,
543
+ tt,
526
544
  {
527
545
  size: this.props.size,
528
546
  columnResize: this.columnResize,
529
547
  staticHeaders: this.props.scrollable !== "none",
530
548
  scrollableDataElement: () => this.vs.container,
531
- draggable: this.props.reorderable || l,
549
+ draggable: this.props.reorderable || n,
532
550
  ref: this.headerRef,
533
551
  elemRef: this.headerElementRef,
534
552
  headerRow: this.getHeaderRow(
535
553
  ye,
536
554
  we,
537
555
  Se,
538
- l,
556
+ n,
539
557
  Ie,
540
558
  ke,
541
559
  Ee,
@@ -546,7 +564,7 @@ const _ = class _ extends r.Component {
546
564
  this.isRtl
547
565
  ),
548
566
  filterRow: this.props.filterable && /* @__PURE__ */ r.createElement(
549
- st,
567
+ it,
550
568
  {
551
569
  cells: this.props.cells,
552
570
  size: this.props.size,
@@ -560,65 +578,65 @@ const _ = class _ extends r.Component {
560
578
  ariaRowIndex: this._columnsMap.length + 1
561
579
  }
562
580
  ) || void 0,
563
- cols: C.map((s, g) => /* @__PURE__ */ r.createElement(
581
+ cols: C.map((i, g) => /* @__PURE__ */ r.createElement(
564
582
  "col",
565
583
  {
566
584
  key: g.toString(),
567
- width: W(s)
585
+ width: W(i)
568
586
  }
569
587
  ))
570
588
  }
571
- ), ze = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, De = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: He, hiddenColumns: Te } = je({
589
+ ), Te = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, ze = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: De, hiddenColumns: He } = je({
572
590
  enabled: this.props.columnVirtualization,
573
591
  columns: C,
574
- tableViewPortWidth: De,
575
- scrollLeft: ze
576
- }), Le = (s, g, m) => {
592
+ tableViewPortWidth: ze,
593
+ scrollLeft: Te
594
+ }), Fe = (i, g, f) => {
577
595
  let E = !1;
578
- const I = this.props.selectedField ? be(this.props.selectedField, s.dataItem) : void 0;
596
+ const I = this.props.selectedField ? ve(this.props.selectedField, i.dataItem) : void 0;
579
597
  return {
580
- row: C.map((u, b) => {
581
- if (Te[b])
598
+ row: C.map((u, v) => {
599
+ if (He[v])
582
600
  return null;
583
- const H = u.id ? u.id : b, T = `${u.className ? u.className + " " : ""}${u.locked ? "k-grid-content-sticky" : ""}`, y = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
601
+ const H = u.id ? u.id : v, F = `${u.className ? u.className + " " : ""}${u.locked ? "k-grid-content-sticky" : ""}`, y = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
584
602
  let w = !1;
585
603
  if (u.editable && this.props.editField) {
586
- const v = be(this.props.editField, s.dataItem);
587
- v && (v === !0 || v === u.field) && (E = !0, w = !0);
604
+ const b = ve(this.props.editField, i.dataItem);
605
+ b && (b === !0 || b === u.field) && (E = !0, w = !0);
588
606
  }
589
- const P = u.cell || w && Ze || bt, L = this.props.expandField && this.props.detail && u.field === this.props.expandField;
607
+ const O = u.cell || w && et || bt, L = this.props.expandField && this.props.detail && u.field === this.props.expandField;
590
608
  return /* @__PURE__ */ r.createElement(
591
- P,
609
+ O,
592
610
  {
593
611
  onContextMenu: this.onContextMenu,
594
612
  key: H,
595
613
  locked: this.props.lockGroups,
596
- id: N.generateNavigatableId(
597
- `${g}-${String(b)}`,
598
- p,
599
- L ? "nodata" : "cell"
614
+ id: _.generateNavigatableId(
615
+ `${g}-${String(v)}`,
616
+ h,
617
+ L || i.rowType === "groupHeader" || i.rowType === "groupFooter" || u.field === "value" ? "nodata" : "cell"
600
618
  ),
601
- colSpan: He[b],
602
- dataItem: s.dataItem,
619
+ colSpan: De[v],
620
+ dataItem: i.dataItem,
603
621
  field: u.field,
604
622
  editor: u.editor,
605
623
  format: u.format,
606
- className: T,
624
+ className: F,
607
625
  render: this.props.cellRender,
608
- cells: ft(this.props.cells, u.cells),
626
+ cells: vt(this.props.cells, u.cells),
609
627
  onChange: this.itemChange,
610
- selectionChange: this.props.onSelectionChange ? (v) => {
611
- this.selectionChange({ event: v, dataItem: s.dataItem, dataIndex: m, columnIndex: b });
628
+ selectionChange: this.props.onSelectionChange ? (b) => {
629
+ this.selectionChange({ event: b, dataItem: i.dataItem, dataIndex: f, columnIndex: v });
612
630
  } : void 0,
613
- columnIndex: b,
631
+ columnIndex: v,
614
632
  columnsCount: C.length,
615
- rowType: s.rowType,
616
- level: s.level,
617
- expanded: s.expanded,
618
- dataIndex: s.dataIndex,
633
+ rowType: i.rowType,
634
+ level: i.level,
635
+ expanded: i.expanded,
636
+ dataIndex: i.dataIndex,
619
637
  style: y,
620
638
  ariaColumnIndex: u.ariaColumnIndex,
621
- isSelected: Array.isArray(I) && I.indexOf(b) > -1
639
+ isSelected: Array.isArray(I) && I.indexOf(v) > -1
622
640
  }
623
641
  );
624
642
  }),
@@ -627,52 +645,52 @@ const _ = class _ extends r.Component {
627
645
  };
628
646
  };
629
647
  let q = 0;
630
- if (i)
631
- for (let s = 0; s < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); s++) {
648
+ if (s)
649
+ for (let i = 0; i < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); i++) {
632
650
  const g = this._data.shift();
633
651
  if (g)
634
- this._data.push(g), q++, g.rowType === "groupHeader" && s--;
652
+ this._data.push(g), q++, g.rowType === "groupHeader" && i--;
635
653
  else
636
654
  break;
637
655
  }
638
- const X = (s) => s >= this._data.length - q;
639
- let J = this.vs.realSkip || 0;
656
+ const X = (i) => i >= this._data.length - q;
657
+ let Y = this.vs.realSkip || 0;
640
658
  const A = [];
641
- let K = !1;
642
- const O = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
659
+ let P = !1;
660
+ const K = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
643
661
  let D = 0;
644
662
  if (this._data.length) {
645
- let s = -1, g = 0;
646
- (this._slicedData || this._data).forEach((m, E) => {
647
- m.rowType === "data" && (J++, s++);
648
- const I = J % 2 === 0, u = this.props.dataItemKey && Ve(this.props.dataItemKey)(m.dataItem), b = E + (this.vs.realSkip || 0), H = u || "ai" + b, T = H + "_1", y = Le(m, H, s);
649
- if (D = b + O + g, A.push(/* @__PURE__ */ r.createElement(
650
- vt,
663
+ let i = -1, g = 0;
664
+ (this._slicedData || this._data).forEach((f, E) => {
665
+ f.rowType === "data" && (Y++, i++);
666
+ const I = Y % 2 === 0, u = this.props.dataItemKey && Ve(this.props.dataItemKey)(f.dataItem), v = E + (this.vs.realSkip || 0), H = u || "ai" + v, F = H + "_1", y = Fe(f, H, i);
667
+ if (D = v + K + g, A.push(/* @__PURE__ */ r.createElement(
668
+ Ct,
651
669
  {
652
670
  key: H,
653
- dataItem: m.dataItem,
671
+ dataItem: f.dataItem,
654
672
  isAltRow: I,
655
673
  isInEdit: y.isInEdit,
656
- rowType: m.rowType,
674
+ rowType: f.rowType,
657
675
  isHidden: X(E),
658
- onClick: (w) => this.rowClick(w, m),
659
- onDoubleClick: (w) => this.rowDblClick(w, m),
676
+ onClick: (w) => this.rowClick(w, f),
677
+ onDoubleClick: (w) => this.rowDblClick(w, f),
660
678
  selectedField: this.props.selectedField,
661
679
  rowHeight: this.props.rowHeight,
662
680
  render: this.props.rowRender,
663
681
  ariaRowIndex: D,
664
- absoluteRowIndex: b,
665
- dataIndex: this.vs.scrollableVirtual ? b : s,
682
+ absoluteRowIndex: v,
683
+ dataIndex: this.vs.scrollableVirtual ? v : i,
666
684
  isSelected: y.isSelected
667
685
  },
668
686
  y.row
669
- )), this.props.detail && m.rowType === "data" && m.expanded) {
687
+ )), this.props.detail && f.rowType === "data" && f.expanded) {
670
688
  const w = C.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
671
- g++, D = b + O + g, A.push(/* @__PURE__ */ r.createElement(
689
+ g++, D = v + K + g, A.push(/* @__PURE__ */ r.createElement(
672
690
  "tr",
673
691
  {
674
- key: T,
675
- className: F(
692
+ key: F,
693
+ className: N(
676
694
  "k-table-row",
677
695
  I ? "k-detail-row k-table-alt-row k-alt" : "k-detail-row"
678
696
  ),
@@ -680,16 +698,16 @@ const _ = class _ extends r.Component {
680
698
  role: "row",
681
699
  "aria-rowindex": D
682
700
  },
683
- this.props.group && this.props.group.map((P, L) => {
701
+ this.props.group && this.props.group.map((O, L) => {
684
702
  var oe;
685
- const v = (oe = y == null ? void 0 : y.row[L]) == null ? void 0 : oe.props.style, Me = v ? this.isRtl ? { left: v.right, right: v.left } : { left: v.left, right: v.right } : {};
703
+ const b = (oe = y == null ? void 0 : y.row[L]) == null ? void 0 : oe.props.style, Me = b ? this.isRtl ? { left: b.right, right: b.left } : { left: b.left, right: b.right } : {};
686
704
  return /* @__PURE__ */ r.createElement(
687
- ve,
705
+ be,
688
706
  {
689
707
  id: "",
690
- dataIndex: m.dataIndex,
691
- field: P.field,
692
- dataItem: m.dataItem,
708
+ dataIndex: f.dataIndex,
709
+ field: O.field,
710
+ dataItem: f.dataItem,
693
711
  key: L,
694
712
  style: Me,
695
713
  ariaColumnIndex: 1 + L,
@@ -701,62 +719,72 @@ const _ = class _ extends r.Component {
701
719
  );
702
720
  }),
703
721
  this.props.expandField && /* @__PURE__ */ r.createElement(
704
- It,
722
+ kt,
705
723
  {
706
- id: N.generateNavigatableId(`${T}-dhcell`, p)
724
+ id: _.generateNavigatableId(`${F}-dhcell`, h)
707
725
  }
708
726
  ),
709
727
  /* @__PURE__ */ r.createElement(
710
- St,
728
+ It,
711
729
  {
712
730
  onContextMenu: this.onContextMenu,
713
- dataItem: m.dataItem,
714
- dataIndex: m.dataIndex,
731
+ dataItem: f.dataItem,
732
+ dataIndex: f.dataIndex,
715
733
  colSpan: w,
716
734
  ariaColIndex: 2 + (this.props.group ? this.props.group.length : 0),
717
735
  detail: this.props.detail,
718
- id: N.generateNavigatableId(`${T}-dcell`, p)
736
+ id: _.generateNavigatableId(`${F}-dcell`, h)
719
737
  }
720
738
  )
721
739
  ));
722
740
  }
723
741
  });
724
742
  } else
725
- K = !0;
726
- const Fe = () => {
727
- const s = this._header;
728
- return s && s.table.clientWidth;
729
- }, Q = () => /* @__PURE__ */ r.createElement("div", { key: "no-records", className: "k-grid-norecords", "aria-rowindex": O, style: { width: Fe() } }, /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template" }, k.length ? k : /* @__PURE__ */ r.createElement(Rt, null))), Y = {
743
+ P = !0;
744
+ const Le = () => {
745
+ const i = this._header;
746
+ return i && i.table.clientWidth;
747
+ }, J = () => /* @__PURE__ */ r.createElement(
748
+ "div",
749
+ {
750
+ key: "no-records",
751
+ className: "k-grid-norecords",
752
+ "aria-rowindex": K,
753
+ style: { width: Le() }
754
+ },
755
+ /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template", [Je]: _.generateNavigatableId("no-records", h) }, k.length ? k : /* @__PURE__ */ r.createElement(yt, null))
756
+ ), Q = {
730
757
  size: this.props.size,
731
758
  onPageChange: this.pagerPageChange,
732
759
  total: a,
733
760
  dir: this.isRtl ? "rtl" : void 0,
734
761
  skip: this.vs.propsSkip || 0,
735
762
  take: (this.props.take !== void 0 ? this.props.take : this.props.pageSize) || 10,
736
- messagesMap: lt,
737
- ...wt(this.props.pageable || {})
738
- }, Z = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...Y }) : /* @__PURE__ */ r.createElement(qe, { className: "k-grid-pager", ...Y }), Ne = (s) => this.props.sort && this.props.sort.filter((g) => g.field === s).length > 0, Ae = (s, g) => /* @__PURE__ */ r.createElement(
763
+ messagesMap: nt,
764
+ ...St(this.props.pageable || {})
765
+ }, Z = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...Q }) : /* @__PURE__ */ r.createElement(qe, { className: "k-grid-pager", ...Q }), Ne = (i) => this.props.sort && this.props.sort.filter((g) => g.field === i).length > 0, Ae = (i, g) => /* @__PURE__ */ r.createElement(
739
766
  "col",
740
767
  {
741
768
  key: g.toString(),
742
- width: W(s)
769
+ width: W(i)
743
770
  }
744
771
  ), ee = (ie = this.props.cells) != null && ie.footerCell || this._columns.some(
745
- (s) => {
772
+ (i) => {
746
773
  var g;
747
- return !!(s.footerCell || (g = s.cells) != null && g.footerCell);
774
+ return !!(i.footerCell || (g = i.cells) != null && g.footerCell);
748
775
  }
749
776
  ) ? /* @__PURE__ */ r.createElement(
750
- ot,
777
+ rt,
751
778
  {
752
779
  size: this.props.size,
753
780
  columnResize: this.columnResize,
754
781
  staticHeaders: this.props.scrollable !== "none",
755
- ref: (s) => this._footer = s,
782
+ ref: (i) => this._footer = i,
756
783
  row: /* @__PURE__ */ r.createElement(
757
- yt,
784
+ wt,
758
785
  {
759
786
  cells: this.props.cells,
787
+ idPrefix: h,
760
788
  columns: this._columns,
761
789
  isRtl: this.isRtl,
762
790
  ariaRowIndex: D + 1
@@ -767,17 +795,17 @@ const _ = class _ extends r.Component {
767
795
  ) : null, te = /* @__PURE__ */ r.createElement(
768
796
  "colgroup",
769
797
  {
770
- ref: (s) => {
771
- this.columnResize.colGroupMain = s;
798
+ ref: (i) => {
799
+ this.columnResize.colGroupMain = i;
772
800
  }
773
801
  },
774
802
  C.map(
775
- (s, g) => /* @__PURE__ */ r.createElement(
803
+ (i, g) => /* @__PURE__ */ r.createElement(
776
804
  "col",
777
805
  {
778
806
  key: g.toString(),
779
- className: Ne(s.field) ? "k-sorted" : void 0,
780
- width: W(s)
807
+ className: Ne(i.field) ? "k-sorted" : void 0,
808
+ width: W(i)
781
809
  }
782
810
  )
783
811
  )
@@ -788,7 +816,7 @@ const _ = class _ extends r.Component {
788
816
  {
789
817
  id: this.props.id,
790
818
  style: this.props.style,
791
- className: F(
819
+ className: N(
792
820
  "k-grid",
793
821
  {
794
822
  "k-grid-md": !this.props.size,
@@ -796,8 +824,8 @@ const _ = class _ extends r.Component {
796
824
  },
797
825
  this.props.className
798
826
  ),
799
- ref: (s) => {
800
- this._element = s;
827
+ ref: (i) => {
828
+ this._element = i;
801
829
  },
802
830
  "aria-label": this.props.ariaLabel,
803
831
  onKeyDown: this.onKeyDown,
@@ -811,15 +839,15 @@ const _ = class _ extends r.Component {
811
839
  {
812
840
  selectable: this.props.selectable,
813
841
  onRelease: this.selectionRelease,
814
- childRef: (s) => {
815
- this.tableElement = s, this.headTable = s;
842
+ childRef: (i) => {
843
+ this.tableElement = i, this.headTable = i;
816
844
  }
817
845
  },
818
846
  /* @__PURE__ */ r.createElement(
819
847
  "table",
820
848
  {
821
- ref: (s) => this.headTable = s,
822
- className: F(
849
+ ref: (i) => this.headTable = i,
850
+ className: N(
823
851
  "k-table k-grid-table",
824
852
  { [`k-table-${G.sizeMap[this.props.size] || this.props.size}`]: this.props.size }
825
853
  ),
@@ -831,26 +859,26 @@ const _ = class _ extends r.Component {
831
859
  ee
832
860
  )
833
861
  ),
834
- K && Q(),
862
+ P && J(),
835
863
  se && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(de, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(ce, { ref: this.dragLogic.refDragElementClue }))
836
864
  ), z, this.props.pageable && Z);
837
865
  let M = this.props.style || {};
838
- return i && (M.height || (M = Object.assign({}, M, { height: "450px" }))), /* @__PURE__ */ r.createElement(U.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
866
+ return s && (M.height || (M = Object.assign({}, M, { height: "450px" }))), /* @__PURE__ */ r.createElement(U.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
839
867
  "div",
840
868
  {
841
869
  id: this.props.id,
842
870
  style: M,
843
- className: F(
871
+ className: N(
844
872
  "k-grid",
845
873
  {
846
874
  "k-grid-md": !this.props.size,
847
875
  [`k-grid-${G.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
848
- "k-grid-virtual": i
876
+ "k-grid-virtual": s
849
877
  },
850
878
  this.props.className
851
879
  ),
852
- ref: (s) => {
853
- this._element = s;
880
+ ref: (i) => {
881
+ this._element = i;
854
882
  },
855
883
  "aria-label": this.props.ariaLabel,
856
884
  onKeyDown: this.onKeyDown,
@@ -867,7 +895,7 @@ const _ = class _ extends r.Component {
867
895
  "aria-colcount": C.length,
868
896
  "aria-rowcount": a,
869
897
  id: this._gridId,
870
- "aria-label": c.toLanguageString(ue, nt[ue])
898
+ "aria-label": c.toLanguageString(ue, ht[ue])
871
899
  },
872
900
  j,
873
901
  /* @__PURE__ */ r.createElement("div", { className: "k-grid-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
@@ -883,15 +911,15 @@ const _ = class _ extends r.Component {
883
911
  {
884
912
  selectable: this.props.selectable,
885
913
  onRelease: this.selectionRelease,
886
- childRef: (s) => {
887
- this.tableElement = s;
914
+ childRef: (i) => {
915
+ this.tableElement = i;
888
916
  }
889
917
  },
890
918
  /* @__PURE__ */ r.createElement(
891
919
  "table",
892
920
  {
893
- ref: (s) => this.tableElement = s,
894
- className: F(
921
+ ref: (i) => this.tableElement = i,
922
+ className: N(
895
923
  "k-table k-grid-table",
896
924
  {
897
925
  "k-table-md": !this.props.size,
@@ -913,11 +941,11 @@ const _ = class _ extends r.Component {
913
941
  A
914
942
  )
915
943
  )
916
- ), K && Q()),
917
- i && /* @__PURE__ */ r.createElement("div", { className: "k-height-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
944
+ ), P && J()),
945
+ s && /* @__PURE__ */ r.createElement("div", { className: "k-height-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
918
946
  "div",
919
947
  {
920
- style: i ? { height: this.vs.containerHeight + "px" } : {}
948
+ style: s ? { height: this.vs.containerHeight + "px" } : {}
921
949
  }
922
950
  ))
923
951
  )),
@@ -931,8 +959,8 @@ const _ = class _ extends r.Component {
931
959
  }
932
960
  selectionChange(a) {
933
961
  if (this.props.onSelectionChange) {
934
- const { event: p, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: i, cell: n } = le(this.props.selectable), h = {
935
- ...this.getArguments(p.syntheticEvent),
962
+ const { event: h, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: s, cell: l } = le(this.props.selectable), p = {
963
+ ...this.getArguments(h.syntheticEvent),
936
964
  dataItem: c,
937
965
  startColIndex: t,
938
966
  endColIndex: t,
@@ -943,22 +971,22 @@ const _ = class _ extends r.Component {
943
971
  ctrlKey: !1,
944
972
  shiftKey: !1,
945
973
  metaKey: !1,
946
- mode: i,
947
- cell: n,
974
+ mode: s,
975
+ cell: l,
948
976
  isDrag: !1,
949
977
  componentId: this._gridId,
950
978
  selectedField: this.props.selectedField || ""
951
979
  };
952
- this.props.onSelectionChange.call(void 0, h);
980
+ this.props.onSelectionChange.call(void 0, p);
953
981
  }
954
982
  }
955
- raiseDataEvent(a, p, c, e, t) {
956
- const i = this.props.onDataStateChange;
983
+ raiseDataEvent(a, h, c, e, t) {
984
+ const s = this.props.onDataStateChange;
957
985
  if (a) {
958
- const n = { ...this.getArguments(e), ...p, targetEvent: t };
959
- a.call(void 0, n);
986
+ const l = { ...this.getArguments(e), ...h, targetEvent: t };
987
+ a.call(void 0, l);
960
988
  } else
961
- i && i.call(
989
+ s && s.call(
962
990
  void 0,
963
991
  {
964
992
  ...this.getArguments(e),
@@ -970,60 +998,60 @@ const _ = class _ extends r.Component {
970
998
  }
971
999
  );
972
1000
  }
973
- columnReorder(a, p, c) {
974
- const e = this._columns[a], t = e.depth, i = (d) => {
1001
+ columnReorder(a, h, c) {
1002
+ const e = this._columns[a], t = e.depth, s = (d) => {
975
1003
  do
976
1004
  d++;
977
1005
  while (d < this._columns.length && this._columns[d].depth > t);
978
1006
  return d;
979
- }, n = this._columns.splice(a, i(a) - a);
980
- this._columns.splice(a < p ? i(p - n.length) : p, 0, ...n), this._columns.filter((d) => d.declarationIndex >= 0).forEach((d, f) => d.orderIndex = f), this._columnsMutations++;
981
- const h = this._columns[a].locked && this._columns[p].locked;
982
- Xe(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), Je(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
983
- const l = this.columns;
1007
+ }, l = this._columns.splice(a, s(a) - a);
1008
+ this._columns.splice(a < h ? s(h - l.length) : h, 0, ...l), this._columns.filter((d) => d.declarationIndex >= 0).forEach((d, m) => d.orderIndex = m), this._columnsMutations++;
1009
+ const p = this._columns[a].locked && this._columns[h].locked;
1010
+ Xe(this._columnsMap, this._columns, p || this._shouldUpdateLeftRight), Ye(this._columnsMap, this._columns, p || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
1011
+ const n = this.columns;
984
1012
  if (this.forceUpdate(), this.props.onColumnReorder) {
985
1013
  const d = {
986
1014
  target: this,
987
- columns: l,
1015
+ columns: n,
988
1016
  columnId: e.id,
989
1017
  nativeEvent: c
990
1018
  };
991
1019
  this.props.onColumnReorder.call(void 0, d);
992
1020
  }
993
1021
  }
994
- groupReorder(a, p, c) {
1022
+ groupReorder(a, h, c) {
995
1023
  if (this.props.group === void 0)
996
1024
  return;
997
1025
  const e = this.props.group.slice();
998
- e.splice(p, 0, ...e.splice(a, 1)), this.groupChange(e, c);
1026
+ e.splice(h, 0, ...e.splice(a, 1)), this.groupChange(e, c);
999
1027
  }
1000
- columnToGroup(a, p, c) {
1028
+ columnToGroup(a, h, c) {
1001
1029
  const e = this._columns[a].field;
1002
1030
  if (!e)
1003
1031
  return;
1004
1032
  const t = (this.props.group || []).slice();
1005
- t.splice(p, 0, { field: e }), this.groupChange(t, c);
1033
+ t.splice(h, 0, { field: e }), this.groupChange(t, c);
1006
1034
  }
1007
- columnGroupChange(a, p) {
1035
+ columnGroupChange(a, h) {
1008
1036
  const c = this.dragLogic.getCurrentGroupsLength;
1009
- this.columnToGroup(a, c, p);
1037
+ this.columnToGroup(a, c, h);
1010
1038
  }
1011
1039
  resetTableWidth() {
1012
1040
  let a = 0;
1013
1041
  if (!this.columnResize.colGroupMain)
1014
1042
  return;
1015
- const p = this.columnResize.colGroupMain.children;
1016
- for (let c = 0; c < p.length; c++) {
1017
- const e = p[c].width;
1043
+ const h = this.columnResize.colGroupMain.children;
1044
+ for (let c = 0; c < h.length; c++) {
1045
+ const e = h[c].width;
1018
1046
  if (!e)
1019
1047
  return;
1020
1048
  a += parseFloat(e.toString());
1021
1049
  }
1022
1050
  a = Math.round(a), this._header && this._header.setWidth(a), this._footer && this._footer.setWidth(a), this.tableElement && (this.tableElement.style.width = a + "px");
1023
1051
  }
1024
- initColumns(a, p) {
1025
- const c = N.getIdPrefix(this.navigationStateRef), e = this.readColumns(a, c, this._columnsMutations), t = e.length !== this._columns.length;
1026
- this._columns = e, this._columns.length === 0 && (this._columns = mt(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: c })), this.configureColumns(this._columns, p, c), this._columnsMap = this.mapColumns(this._columns, t), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
1052
+ initColumns(a, h) {
1053
+ const c = _.getIdPrefix(this.navigationStateRef), e = this.readColumns(a, c, this._columnsMutations), t = e.length !== this._columns.length;
1054
+ this._columns = e, this._columns.length === 0 && (this._columns = mt(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: c })), this.configureColumns(this._columns, h, c), this._columnsMap = this.mapColumns(this._columns, t), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
1027
1055
  }
1028
1056
  getDataState() {
1029
1057
  return {
@@ -1042,9 +1070,9 @@ const _ = class _ extends r.Component {
1042
1070
  };
1043
1071
  }
1044
1072
  };
1045
- _.displayName = "KendoReactGrid", _.defaultProps = {
1073
+ T.displayName = "KendoReactGrid", T.defaultProps = {
1046
1074
  // never use this
1047
- }, _.propTypes = {
1075
+ }, T.propTypes = {
1048
1076
  data: o.oneOfType([
1049
1077
  o.array,
1050
1078
  o.shape({
@@ -1120,9 +1148,9 @@ _.displayName = "KendoReactGrid", _.defaultProps = {
1120
1148
  dataItemKey: o.string,
1121
1149
  navigatable: o.bool,
1122
1150
  size: o.oneOf(["small", "medium"])
1123
- }, _.contextType = U;
1124
- let B = _;
1125
- at(B);
1151
+ }, T.contextType = U;
1152
+ let B = T;
1153
+ lt(B);
1126
1154
  export {
1127
1155
  B as Grid
1128
1156
  };