@progress/kendo-react-grid 8.3.0-develop.11 → 8.3.0-develop.12

package/Grid.mjs

@@ -50,7 +50,10 @@ const H = class H extends r.Component {
       this.observer && this.observer.disconnect();
       const { rowIndex: t } = e;
       if (this.props.scrollable === "virtual")
-        this.vs.askedSkip = t, this.vs.container.scroll(0, Math.round(this.vs.askedSkip / this.vs.total * this.vs.container.scrollHeight));
+        this.vs.askedSkip = t, this.vs.container.scroll(
+          0,
+          Math.round(this.vs.askedSkip / this.vs.total * this.vs.container.scrollHeight)
+        );
       else if (this.element) {
         const s = t < 1 ? this.element.querySelector("tbody > tr:nth-child(1)") : this.element.querySelector(`tbody > tr:nth-child(${t + 1})`);
         s && this.containerRef.current && (this.containerRef.current.scrollTop = s.offsetTop);
@@ -103,7 +106,13 @@ const H = class H extends r.Component {
       if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof ve) {
         const { rowHeight: s = 0, detail: l, expandField: d } = this.props;
         let { detailRowHeight: p = 0 } = this.props;
-        p = l && d ? p : 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, p, this._data)) : this.vs.rowHeightService = new ne(e, s, p);
+        p = l && d ? p : 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,
+          p,
+          this._data
+        )) : this.vs.rowHeightService = new ne(e, s, p);
         const h = this.vs.rowHeightService.totalHeight();
         this.vs.containerHeight = Ce ? Math.min(Re, h) : h;
       }
@@ -155,57 +164,42 @@ const H = class H extends r.Component {
         this.props.onNavigationAction.call(void 0, t);
       }
     }, this.rowClick = (e, t) => {
-      this.props.onRowClick && e.target.nodeName === "TD" && this.props.onRowClick.call(
-        void 0,
-        {
-          dataItem: t.dataItem,
-          ...this.getArguments(e)
-        }
-      );
+      this.props.onRowClick && e.target.nodeName === "TD" && this.props.onRowClick.call(void 0, {
+        dataItem: t.dataItem,
+        ...this.getArguments(e)
+      });
     }, this.rowDblClick = (e, t) => {
-      this.props.onRowDoubleClick && e.target.nodeName === "TD" && this.props.onRowDoubleClick.call(
-        void 0,
-        {
-          dataItem: t.dataItem,
-          ...this.getArguments(e)
-        }
-      );
+      this.props.onRowDoubleClick && e.target.nodeName === "TD" && this.props.onRowDoubleClick.call(void 0, {
+        dataItem: t.dataItem,
+        ...this.getArguments(e)
+      });
     }, this.itemChange = (e) => {
       const t = this.props.onItemChange;
       if (e.field === this.props.expandField || this.props.group && e.field === void 0) {
         const s = this.props.onExpandChange;
-        s && s.call(
-          void 0,
-          {
-            ...this.getArguments(e.syntheticEvent),
-            dataItem: e.dataItem,
-            dataIndex: e.dataIndex,
-            value: e.value
-          }
-        );
-        return;
-      }
-      t && t.call(
-        void 0,
-        {
+        s && s.call(void 0, {
           ...this.getArguments(e.syntheticEvent),
           dataItem: e.dataItem,
-          field: e.field,
+          dataIndex: e.dataIndex,
           value: e.value
-        }
-      );
+        });
+        return;
+      }
+      t && t.call(void 0, {
+        ...this.getArguments(e.syntheticEvent),
+        dataItem: e.dataItem,
+        field: e.field,
+        value: e.value
+      });
     }, this.onHeaderSelectionChange = (e) => {
-      this.props.onHeaderSelectionChange && this.props.onHeaderSelectionChange.call(
-        void 0,
-        {
-          field: e.field,
-          nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
-          syntheticEvent: e.syntheticEvent,
-          target: this,
-          dataItems: this.getLeafDataItems(),
-          selectedField: this.props.selectedField
-        }
-      );
+      this.props.onHeaderSelectionChange && this.props.onHeaderSelectionChange.call(void 0, {
+        field: e.field,
+        nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
+        syntheticEvent: e.syntheticEvent,
+        target: this,
+        dataItems: this.getLeafDataItems(),
+        selectedField: this.props.selectedField
+      });
     }, this.selectionRelease = (e) => {
       if (this.props.onSelectionChange) {
         const t = this.getSlicedLeafDataItems()[e.startRowIndex], s = this.getSlicedLeafDataItems()[e.endRowIndex], l = {
@@ -266,16 +260,13 @@ const H = class H extends r.Component {
       if (this.props.onClipboard) {
         if (!this.inActiveElement() || !e)
           return;
-        this.props.onClipboard.call(
-          void 0,
-          {
-            type: e,
-            nativeEvent: t,
-            columns: this._columns,
-            dataItemKey: this.props.dataItemKey || "",
-            ...typeof this.props.clipboard != "boolean" ? this.props.clipboard : {}
-          }
-        );
+        this.props.onClipboard.call(void 0, {
+          type: e,
+          nativeEvent: t,
+          columns: this._columns,
+          dataItemKey: this.props.dataItemKey || "",
+          ...typeof this.props.clipboard != "boolean" ? this.props.clipboard : {}
+        });
       }
     }, this.inActiveElement = () => {
       var d, p, h;
@@ -284,24 +275,23 @@ const H = class H extends r.Component {
       const e = Ve(this.document), t = e ? e.matches(".k-table-td") ? e : (d = this.document) == null ? void 0 : d.body : (p = this.document) == null ? void 0 : p.body, s = t.closest(".k-grid-container"), l = t && ((h = this._element) == null ? void 0 : h.contains(t));
       return !!(t && l && s);
     }, this.onResize = (e, t, s, l, d, p) => {
-      this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(
-        void 0,
-        {
-          columns: this.columns,
-          nativeEvent: l,
-          targetColumnId: p,
-          index: e,
-          newWidth: t,
-          oldWidth: s,
-          end: d,
-          target: this
-        }
-      );
-    }, this.reInitVirtualization = y((e, t, s, l, d, p) => {
-      this.vs.reset();
-      const h = this.getVirtualScroll(this.props);
-      this.vs = new h(p);
-    }), this.flatData = y((e, t, s, l, d, p, h) => {
+      this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(void 0, {
+        columns: this.columns,
+        nativeEvent: l,
+        targetColumnId: p,
+        index: e,
+        newWidth: t,
+        oldWidth: s,
+        end: d,
+        target: this
+      });
+    }, this.reInitVirtualization = y(
+      (e, t, s, l, d, p) => {
+        this.vs.reset();
+        const h = this.getVirtualScroll(this.props);
+        this.vs = new h(p);
+      }
+    ), this.flatData = y((e, t, s, l, d, p, h) => {
       const g = [], v = vt(
         g,
         e,
@@ -311,14 +301,14 @@ const H = class H extends r.Component {
         d
       );
       return { flattedData: g, resolvedGroupsCount: v };
-    }), this.rowHeightService = y((e, t, s, l, d) => new ne(t, s, l, d)), this.childrenToArray = y((e) => r.Children.toArray(e)), this.readColumns = y(
-      (e, t, s) => {
-        const l = e.filter((d) => d && d.type && d.type.displayName === "KendoReactGridColumn");
-        return Ct(l, this.columns, { prevId: 0, idPrefix: t });
-      }
-    ), this.mapColumns = y(
-      (e, t) => Je(e, !0)
-    ), this.filterColumnsByMediaProp = (e) => e.filter((t) => M && t && t.media ? window.matchMedia(t.media).matches : t), this.configureColumns = y((e, t, s) => {
+    }), this.rowHeightService = y(
+      (e, t, s, l, d) => new ne(t, s, l, d)
+    ), this.childrenToArray = y((e) => r.Children.toArray(e)), this.readColumns = y((e, t, s) => {
+      const l = e.filter(
+        (d) => d && d.type && d.type.displayName === "KendoReactGridColumn"
+      );
+      return Ct(l, this.columns, { prevId: 0, idPrefix: t });
+    }), this.mapColumns = y((e, t) => Je(e, !0)), this.filterColumnsByMediaProp = (e) => e.filter((t) => M && t && t.media ? window.matchMedia(t.media).matches : t), this.configureColumns = y((e, t, s) => {
       this.props.selectedField && e.filter((g) => g.field === this.props.selectedField).forEach((g) => {
         g.width = g.width || "50px", g.cell = g.cell || it, g.headerCell = g.headerCell || It;
       });
@@ -357,38 +347,40 @@ const H = class H extends r.Component {
           locked: this.props.lockGroups
         }), h++;
       e.slice(h).forEach((g) => g.parentIndex >= 0 && (g.parentIndex += h));
-    }), this.getHeaderRow = y((e, t, s, l, d, p, h, g, v, z, E, G, O) => /* @__PURE__ */ r.createElement(
-      lt,
-      {
-        cells: this.props.cells,
-        sort: e,
-        sortable: t,
-        sortChange: this.sortChange,
-        group: s || [],
-        groupable: l,
-        groupChange: this.groupChange,
-        filter: d,
-        filterable: p,
-        filterOperators: h,
-        filterChange: this.filterChange,
-        columnMenu: v,
-        columnMenuIcon: z,
-        selectionChange: this.onHeaderSelectionChange,
-        columns: E,
-        columnResize: this.columnResize,
-        pressHandler: this.dragLogic.pressHandler,
-        dragHandler: this.dragLogic.dragHandler,
-        releaseHandler: this.dragLogic.releaseHandler,
-        columnsMap: G,
-        cellRender: g,
-        isRtl: O,
-        dragClue: this.dragLogic.dragClueRef,
-        headerRef: this.headerElementRef,
-        containerRef: this.containerRef,
-        navigatable: !!this.props.navigatable,
-        columnGroupChange: this.columnGroupChange
-      }
-    )), this.resolveTitle = (e) => {
+    }), this.getHeaderRow = y(
+      (e, t, s, l, d, p, h, g, v, z, E, G, O) => /* @__PURE__ */ r.createElement(
+        lt,
+        {
+          cells: this.props.cells,
+          sort: e,
+          sortable: t,
+          sortChange: this.sortChange,
+          group: s || [],
+          groupable: l,
+          groupChange: this.groupChange,
+          filter: d,
+          filterable: p,
+          filterOperators: h,
+          filterChange: this.filterChange,
+          columnMenu: v,
+          columnMenuIcon: z,
+          selectionChange: this.onHeaderSelectionChange,
+          columns: E,
+          columnResize: this.columnResize,
+          pressHandler: this.dragLogic.pressHandler,
+          dragHandler: this.dragLogic.dragHandler,
+          releaseHandler: this.dragLogic.releaseHandler,
+          columnsMap: G,
+          cellRender: g,
+          isRtl: O,
+          dragClue: this.dragLogic.dragClueRef,
+          headerRef: this.headerElementRef,
+          containerRef: this.containerRef,
+          navigatable: !!this.props.navigatable,
+          columnGroupChange: this.columnGroupChange
+        }
+      )
+    ), this.resolveTitle = (e) => {
       const t = this._columns.find((l) => l.field === e), s = t && (t.title || t.field);
       return s === void 0 ? e : s;
     }, 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), this.handleFocusInEditableRows = () => {
@@ -546,7 +538,11 @@ const H = class H extends r.Component {
     this.initializeVirtualization(a, v);
     const E = this.childrenToArray(this.props.children);
     this.initColumns(E, h);
-    const G = E.map((i) => i && i.type && i.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(i, { ...i.props, ariaControls: this._gridId }) : null), O = E.filter((i) => i && i.type && i.type.displayName === "KendoReactGridNoRecords"), j = E.filter((i) => i && i.type && i.type.displayName === "KendoReactGridStatusBar"), R = this._columns.filter((i) => i.children.length === 0), q = v && /* @__PURE__ */ r.createElement(
+    const G = E.map((i) => i && i.type && i.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(i, { ...i.props, ariaControls: this._gridId }) : null), O = E.filter(
+      (i) => i && i.type && i.type.displayName === "KendoReactGridNoRecords"
+    ), j = E.filter(
+      (i) => i && i.type && i.type.displayName === "KendoReactGridStatusBar"
+    ), R = this._columns.filter((i) => i.children.length === 0), q = v && /* @__PURE__ */ r.createElement(
       ht,
       {
         group: this.props.group || [],
@@ -559,7 +555,17 @@ const H = class H extends r.Component {
         ariaControls: this._gridId,
         onContextMenu: this.onContextMenu
       }
-    ), { sort: _e, sortable: xe, group: ke, filter: Te, filterable: De, filterOperators: He = Se, headerCellRender: ze, columnMenu: Ae, columnMenuIcon: Fe } = this.props, J = /* @__PURE__ */ r.createElement(
+    ), {
+      sort: _e,
+      sortable: xe,
+      group: ke,
+      filter: Te,
+      filterable: De,
+      filterOperators: He = Se,
+      headerCellRender: ze,
+      columnMenu: Ae,
+      columnMenuIcon: Fe
+    } = this.props, J = /* @__PURE__ */ r.createElement(
       at,
       {
         size: t,
@@ -601,13 +607,7 @@ const H = class H extends r.Component {
             ariaRowIndex: this._columnsMap.length + 1
           }
         ) || void 0,
-        cols: R.map((i, f) => /* @__PURE__ */ r.createElement(
-          "col",
-          {
-            key: f.toString(),
-            width: U(i)
-          }
-        ))
+        cols: R.map((i, f) => /* @__PURE__ */ r.createElement("col", { key: f.toString(), width: U(i) }))
       }
     ), Ne = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, Le = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: Me, hiddenColumns: Ge } = Qe({
       enabled: this.props.columnVirtualization,
@@ -621,7 +621,10 @@ const H = class H extends r.Component {
         row: R.map((u, C) => {
           if (Ge[C])
             return null;
-          const N = u.id ? u.id : C, w = m(s.contentSticky({ locked: u.locked }), u.className), I = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
+          const N = u.id ? u.id : C, w = m(
+            s.contentSticky({ locked: u.locked }),
+            u.className
+          ), I = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
           let K = !1;
           if (u.editable && this.props.editField) {
             const x = ye(this.props.editField, i.dataItem);
@@ -649,7 +652,12 @@ const H = class H extends r.Component {
               cells: yt(this.props.cells, u.cells),
               onChange: this.itemChange,
               selectionChange: this.props.onSelectionChange ? (x) => {
-                this.selectionChange({ event: x, dataItem: i.dataItem, dataIndex: b, columnIndex: C });
+                this.selectionChange({
+                  event: x,
+                  dataItem: i.dataItem,
+                  dataIndex: b,
+                  columnIndex: C
+                });
               } : void 0,
               columnIndex: C,
               columnsCount: R.length,
@@ -689,78 +697,83 @@ const H = class H extends r.Component {
       (this._slicedData || this._data).forEach((b, F) => {
         b.rowType === "data" && (Q++, i++);
         const k = Q % 2 === 0, S = this.props.dataItemKey && je(this.props.dataItemKey)(b.dataItem), u = F + (this.vs.realSkip || 0), C = S || "ai" + u, N = C + "_1", w = Oe(b, C, i, k);
-        if (A = u + Z + f, P.push(/* @__PURE__ */ r.createElement(
-          St,
-          {
-            key: C,
-            dataItem: b.dataItem,
-            isAltRow: k,
-            isInEdit: w.isInEdit,
-            rowType: b.rowType,
-            isHidden: Y(F),
-            onClick: (I) => this.rowClick(I, b),
-            onDoubleClick: (I) => this.rowDblClick(I, b),
-            selectedField: this.props.selectedField,
-            rowHeight: this.props.rowHeight,
-            render: this.props.rowRender,
-            ariaRowIndex: A,
-            absoluteRowIndex: u,
-            dataIndex: this.vs.scrollableVirtual && !this.props.groupable ? u : i,
-            isSelected: w.isSelected
-          },
-          w.row
-        )), this.props.detail && b.rowType === "data" && b.expanded) {
-          const I = R.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
-          f++, A = u + Z + f, P.push(/* @__PURE__ */ r.createElement(
-            "tr",
+        if (A = u + Z + f, P.push(
+          /* @__PURE__ */ r.createElement(
+            St,
             {
-              key: N,
-              className: m(
-                s.detailTr({ isAlt: k })
-              ),
-              style: { visibility: Y(F) ? "hidden" : "", height: this.props.detailRowHeight },
-              role: "row",
-              "aria-rowindex": A
+              key: C,
+              dataItem: b.dataItem,
+              isAltRow: k,
+              isInEdit: w.isInEdit,
+              rowType: b.rowType,
+              isHidden: Y(F),
+              onClick: (I) => this.rowClick(I, b),
+              onDoubleClick: (I) => this.rowDblClick(I, b),
+              selectedField: this.props.selectedField,
+              rowHeight: this.props.rowHeight,
+              render: this.props.rowRender,
+              ariaRowIndex: A,
+              absoluteRowIndex: u,
+              dataIndex: this.vs.scrollableVirtual && !this.props.groupable ? u : i,
+              isSelected: w.isSelected
             },
-            this.props.group && this.props.group.map((K, L) => {
-              var le;
-              const _ = (le = w == null ? void 0 : w.row[L]) == null ? void 0 : le.props.style, x = _ ? this.isRtl ? { left: _.right, right: _.left } : { left: _.left, right: _.right } : {};
-              return /* @__PURE__ */ r.createElement(
-                Ee,
+            w.row
+          )
+        ), this.props.detail && b.rowType === "data" && b.expanded) {
+          const I = R.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
+          f++, A = u + Z + f, P.push(
+            /* @__PURE__ */ r.createElement(
+              "tr",
+              {
+                key: N,
+                className: m(s.detailTr({ isAlt: k })),
+                style: {
+                  visibility: Y(F) ? "hidden" : "",
+                  height: this.props.detailRowHeight
+                },
+                role: "row",
+                "aria-rowindex": A
+              },
+              this.props.group && this.props.group.map((K, L) => {
+                var le;
+                const _ = (le = w == null ? void 0 : w.row[L]) == null ? void 0 : le.props.style, x = _ ? this.isRtl ? { left: _.right, right: _.left } : { left: _.left, right: _.right } : {};
+                return /* @__PURE__ */ r.createElement(
+                  Ee,
+                  {
+                    id: "",
+                    dataIndex: b.dataIndex,
+                    field: K.field,
+                    dataItem: b.dataItem,
+                    key: L,
+                    style: x,
+                    ariaColumnIndex: 1 + L,
+                    isSelected: !1,
+                    locked: this.props.lockGroups,
+                    isRtl: this.isRtl,
+                    cells: this.props.cells
+                  }
+                );
+              }),
+              this.props.expandField && /* @__PURE__ */ r.createElement(
+                Dt,
                 {
-                  id: "",
-                  dataIndex: b.dataIndex,
-                  field: K.field,
+                  id: D.generateNavigatableId(`${N}-dhcell`, n)
+                }
+              ),
+              /* @__PURE__ */ r.createElement(
+                Tt,
+                {
+                  onContextMenu: this.onContextMenu,
                   dataItem: b.dataItem,
-                  key: L,
-                  style: x,
-                  ariaColumnIndex: 1 + L,
-                  isSelected: !1,
-                  locked: this.props.lockGroups,
-                  isRtl: this.isRtl,
-                  cells: this.props.cells
+                  dataIndex: b.dataIndex,
+                  colSpan: I,
+                  ariaColIndex: 2 + (this.props.group ? this.props.group.length : 0),
+                  detail: this.props.detail,
+                  id: D.generateNavigatableId(`${N}-dcell`, n)
                 }
-              );
-            }),
-            this.props.expandField && /* @__PURE__ */ r.createElement(
-              Dt,
-              {
-                id: D.generateNavigatableId(`${N}-dhcell`, n)
-              }
-            ),
-            /* @__PURE__ */ r.createElement(
-              Tt,
-              {
-                onContextMenu: this.onContextMenu,
-                dataItem: b.dataItem,
-                dataIndex: b.dataIndex,
-                colSpan: I,
-                ariaColIndex: 2 + (this.props.group ? this.props.group.length : 0),
-                detail: this.props.detail,
-                id: D.generateNavigatableId(`${N}-dcell`, n)
-              }
+              )
             )
-          ));
+          );
         }
       });
     } else
@@ -768,22 +781,14 @@ const H = class H extends r.Component {
     const Pe = () => {
       const i = this._header;
       return i && i.table && i.table.clientWidth;
-    }, ee = () => /* @__PURE__ */ r.createElement(
+    }, ee = () => /* @__PURE__ */ r.createElement("div", { key: "no-records", className: m(s.noRecords({})), style: { width: Pe() } }, /* @__PURE__ */ r.createElement(
       "div",
       {
-        key: "no-records",
-        className: m(s.noRecords({})),
-        style: { width: Pe() }
+        className: m(s.noRecordsTemplate({})),
+        [st]: D.generateNavigatableId("no-records", n)
       },
-      /* @__PURE__ */ r.createElement(
-        "div",
-        {
-          className: m(s.noRecordsTemplate({})),
-          [st]: D.generateNavigatableId("no-records", n)
-        },
-        O.length ? O : /* @__PURE__ */ r.createElement(_t, null)
-      )
-    ), te = {
+      O.length ? O : /* @__PURE__ */ r.createElement(_t, null)
+    )), te = {
       size: t,
       onPageChange: this.pagerPageChange,
       total: a,
@@ -792,18 +797,10 @@ const H = class H extends r.Component {
       take: (this.props.take !== void 0 ? this.props.take : this.props.pageSize) || 10,
       messagesMap: ut,
       ...kt(this.props.pageable || {})
-    }, se = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...te }) : /* @__PURE__ */ r.createElement(Ze, { className: m(s.pager({})), ...te }), We = (i, f) => /* @__PURE__ */ r.createElement(
-      "col",
-      {
-        key: f.toString(),
-        width: U(i)
-      }
-    ), ie = (ae = this.props.cells) != null && ae.footerCell || this._columns.some(
-      (i) => {
-        var f;
-        return !!(i.footerCell || (f = i.cells) != null && f.footerCell);
-      }
-    ) ? /* @__PURE__ */ r.createElement(
+    }, se = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...te }) : /* @__PURE__ */ r.createElement(Ze, { className: m(s.pager({})), ...te }), We = (i, f) => /* @__PURE__ */ r.createElement("col", { key: f.toString(), width: U(i) }), ie = (ae = this.props.cells) != null && ae.footerCell || this._columns.some((i) => {
+      var f;
+      return !!(i.footerCell || (f = i.cells) != null && f.footerCell);
+    }) ? /* @__PURE__ */ r.createElement(
       dt,
       {
         size: t,
@@ -830,16 +827,14 @@ const H = class H extends r.Component {
           this.columnResize.colGroupMain = i;
         }
       },
-      R.map(
-        (i, f) => /* @__PURE__ */ r.createElement(
-          "col",
-          {
-            key: f.toString(),
-            className: we(i.field, this.props.sort) ? m(s.sorted({})) : void 0,
-            width: U(i)
-          }
-        )
-      )
+      R.map((i, f) => /* @__PURE__ */ r.createElement(
+        "col",
+        {
+          key: f.toString(),
+          className: we(i.field, this.props.sort) ? m(s.sorted({})) : void 0,
+          width: U(i)
+        }
+      ))
     ), re = this.dragLogic.reorderable || this.dragLogic.groupable;
     if (this.props.scrollable === "none")
       return /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
@@ -847,10 +842,7 @@ const H = class H extends r.Component {
         {
           id: this.props.id,
           style: this.props.style,
-          className: m(
-            s.wrapper({ size: t }),
-            this.props.className
-          ),
+          className: m(s.wrapper({ size: t }), this.props.className),
           ref: (i) => {
             this._element = i;
           },
@@ -878,7 +870,15 @@ const H = class H extends r.Component {
             },
             oe,
             J,
-            /* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: m(s.tbody({})), ...ge }, P),
+            /* @__PURE__ */ r.createElement(
+              "tbody",
+              {
+                role: "rowgroup",
+                className: m(s.tbody({})),
+                ...ge
+              },
+              P
+            ),
             ie
           )
         ),
@@ -1008,17 +1008,14 @@ const H = class H extends r.Component {
       const l = { ...this.getArguments(e), ...n, targetEvent: t };
       a.call(void 0, l);
     } else
-      s && s.call(
-        void 0,
-        {
-          ...this.getArguments(e),
-          targetEvent: t || {},
-          dataState: {
-            ...this.getDataState(),
-            ...c
-          }
+      s && s.call(void 0, {
+        ...this.getArguments(e),
+        targetEvent: t || {},
+        dataState: {
+          ...this.getDataState(),
+          ...c
         }
-      );
+      });
   }
   columnReorder(a, n, c) {
     const e = this._columns[a], t = e.depth, s = (h) => {
@@ -1073,7 +1070,10 @@ const H = class H extends r.Component {
   }
   initColumns(a, n) {
     const c = D.getIdPrefix(this.navigationStateRef), e = this.readColumns(a, c, this._columnsMutations), t = this.filterColumnsByMediaProp(e);
-    this._columns = t, this._columns.length === 0 && (this._columns = wt(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: c })), this.configureColumns(this._columns, n, c), this._columnsMap = this.mapColumns(this._columns, this._columnsMutations), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
+    this._columns = t, this._columns.length === 0 && (this._columns = wt(this.props.data, this.props.group, this.props.expandField, {
+      prevId: 0,
+      idPrefix: c
+    })), this.configureColumns(this._columns, n, c), this._columnsMap = this.mapColumns(this._columns, this._columnsMutations), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
   }
   getDataState() {
     return {
@@ -1121,15 +1121,10 @@ H.displayName = "KendoReactGrid", H.defaultProps = {
       responsive: o.bool,
       info: o.bool,
       type: o.oneOf(["numeric", "input"]),
-      pageSizes: o.oneOfType(
-        [
-          o.bool,
-          o.arrayOf(o.oneOfType([
-            o.string,
-            o.number
-          ]))
-        ]
-      ),
+      pageSizes: o.oneOfType([
+        o.bool,
+        o.arrayOf(o.oneOfType([o.string, o.number]))
+      ]),
       previousNext: o.bool
     })
   ]),

package/StatusBar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),h=require("@progress/kendo-react-common");function O(r){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const o in r)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(r,o);Object.defineProperty(s,o,n.get?n:{enumerable:!0,get:()=>r[o]})}}return s.default=r,Object.freeze(s)}const c=O(E),b=r=>{const{data:s=[]}=r;return c.createElement("div",{className:"k-selection-aggregates k-grid-selection-aggregates"},s.map((o,n)=>c.createElement("div",{key:n},c.createElement("span",{className:"k-selection-aggregates-item-text"},o.type,": "),c.createElement("span",{className:"k-selection-aggregates-item-value"},o.formattedValue))))};b.displayName="KendoReactGridStatusBar";const p=r=>{var o;const s=r.slice();for(let n=0;n<s.length;n++)for(;s[n]&&((o=s[n].children)!=null&&o.length);)s.splice(n,1,...s[n].children);return s},j=r=>{const{dataItems:s,target:o,selectedField:n}=r,y=p(o.columns).map(e=>e.field).filter(e=>e&&typeof e=="string").map(e=>h.getter(e)),S=h.getter(n),t={dates:[],numbers:[],booleans:[],others:[]},D=e=>{typeof e=="number"?t.numbers.push(e):typeof e=="boolean"?t.booleans.push(e):e instanceof Date?t.dates.push(e):t.others.push(e)};s.forEach(e=>{const a=S(e);a&&a.forEach(l=>{D(y[l](e))})});const u=t.dates.map(e=>e.getTime()),g=t.booleans.filter(e=>e).length,m=t.booleans.filter(e=>!e).length,i=t.numbers.length?t.numbers.reduce((e,a)=>e+=a,0):void 0,d={sum:i,average:typeof i=="number"?i/t.numbers.length:void 0,min:t.numbers.length?Math.min(...t.numbers):void 0,max:t.numbers.length?Math.max(...t.numbers):void 0,count:t.numbers.length+t.booleans.length+t.dates.length+t.others.length,isTrue:g>0?g:void 0,isFalse:m>0?m:void 0,earliest:t.dates.length?new Date(Math.min(...u)):void 0,latest:t.dates.length?new Date(Math.max(...u)):void 0},v=(e,a)=>(a==="sum"||a==="average")&&typeof e=="number"?e.toFixed(2):(a==="earliest"||a==="latest")&&e instanceof Date?e.toLocaleDateString():String(e),f=[];return Object.keys(d).forEach(e=>{const a=e,l=d[a];l!==void 0&&f.push({type:a,value:l,formattedValue:v(l,a)})}),f};exports.StatusBar=b;exports.getStatusData=j;exports.leafColumns=p;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),h=require("@progress/kendo-react-common");function O(r){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const o in r)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(r,o);Object.defineProperty(s,o,n.get?n:{enumerable:!0,get:()=>r[o]})}}return s.default=r,Object.freeze(s)}const l=O(E),b=r=>{const{data:s=[]}=r;return l.createElement("div",{className:"k-selection-aggregates k-grid-selection-aggregates"},s.map((o,n)=>l.createElement("div",{key:n},l.createElement("span",{className:"k-selection-aggregates-item-text"},o.type,": "),l.createElement("span",{className:"k-selection-aggregates-item-value"},o.formattedValue))))};b.displayName="KendoReactGridStatusBar";const p=r=>{var o;const s=r.slice();for(let n=0;n<s.length;n++)for(;s[n]&&((o=s[n].children)!=null&&o.length);)s.splice(n,1,...s[n].children);return s},j=r=>{const{dataItems:s,target:o,selectedField:n}=r,y=p(o.columns).map(e=>e.field).filter(e=>e&&typeof e=="string").map(e=>h.getter(e)),S=h.getter(n),t={dates:[],numbers:[],booleans:[],others:[]},D=e=>{typeof e=="number"?t.numbers.push(e):typeof e=="boolean"?t.booleans.push(e):e instanceof Date?t.dates.push(e):t.others.push(e)};s.forEach(e=>{const a=S(e);a&&a.forEach(c=>{D(y[c](e))})});const u=t.dates.map(e=>e.getTime()),g=t.booleans.filter(e=>e).length,m=t.booleans.filter(e=>!e).length,i=t.numbers.length?t.numbers.reduce((e,a)=>e+=a,0):void 0,d={sum:i,average:typeof i=="number"?i/t.numbers.length:void 0,min:t.numbers.length?Math.min(...t.numbers):void 0,max:t.numbers.length?Math.max(...t.numbers):void 0,count:t.numbers.length+t.booleans.length+t.dates.length+t.others.length,isTrue:g>0?g:void 0,isFalse:m>0?m:void 0,earliest:t.dates.length?new Date(Math.min(...u)):void 0,latest:t.dates.length?new Date(Math.max(...u)):void 0},v=(e,a)=>(a==="sum"||a==="average")&&typeof e=="number"?e.toFixed(2):(a==="earliest"||a==="latest")&&e instanceof Date?e.toLocaleDateString():String(e),f=[];return Object.keys(d).forEach(e=>{const a=e,c=d[a];c!==void 0&&f.push({type:a,value:c,formattedValue:v(c,a)})}),f};exports.StatusBar=b;exports.getStatusData=j;exports.leafColumns=p;

package/StatusBar.mjs

@@ -21,7 +21,9 @@ const D = (r) => {
       n.splice(a, 1, ...n[a].children);
   return n;
 }, N = (r) => {
-  const { dataItems: n, target: o, selectedField: a } = r, p = D(o.columns).map((e) => e.field).filter((e) => e && typeof e == "string").map((e) => f(e)), b = f(a), t = { dates: [], numbers: [], booleans: [], others: [] }, y = (e) => {
+  const { dataItems: n, target: o, selectedField: a } = r, p = D(o.columns).map((e) => e.field).filter((e) => e && typeof e == "string").map(
+    (e) => f(e)
+  ), b = f(a), t = { dates: [], numbers: [], booleans: [], others: [] }, y = (e) => {
     typeof e == "number" ? t.numbers.push(e) : typeof e == "boolean" ? t.booleans.push(e) : e instanceof Date ? t.dates.push(e) : t.others.push(e);
   };
   n.forEach((e) => {

package/columnMenu/GridColumnMenuColumnsList.mjs

@@ -14,21 +14,35 @@ import { Button as f } from "@progress/kendo-react-buttons";
 import { useLocalization as I } from "@progress/kendo-react-intl";
 import { filterSelectAll as h, messages as u, filterApplyButton as g, filterResetButton as E } from "../messages/index.mjs";
 const R = (l) => {
-  const [a, S] = t.useState(""), d = l.columns.reduce((e, n) => ({ ...e, [n.id || ""]: !!l.columnsState.find((o) => o.id === n.id) }), {}), [c, m] = t.useState(d), b = t.useMemo(() => l.columns.filter((e) => {
-    var n;
-    return (n = e.title || e.field) == null ? void 0 : n.toLowerCase().includes(a.toLowerCase());
-  }), [l.columns, a]), r = I(), N = t.useCallback(() => {
+  const [a, S] = t.useState(""), d = l.columns.reduce(
+    (e, n) => ({ ...e, [n.id || ""]: !!l.columnsState.find((o) => o.id === n.id) }),
+    {}
+  ), [c, m] = t.useState(d), b = t.useMemo(
+    () => l.columns.filter((e) => {
+      var n;
+      return (n = e.title || e.field) == null ? void 0 : n.toLowerCase().includes(a.toLowerCase());
+    }),
+    [l.columns, a]
+  ), r = I(), N = t.useCallback(() => {
     const e = l.columns.filter((n) => c[n.id || ""]);
     l.onColumnsChange.call(void 0, e), l.onCloseMenu.call(void 0);
   }, [c, l.columns, l.onColumnsChange, l.onCloseMenu]), x = () => {
     m(d);
-  }, s = t.useMemo(() => Object.values(c).filter((e) => e).length, [c]), i = t.useMemo(() => s === l.columns.length, [l.columns, s]), y = t.useCallback(() => {
+  }, s = t.useMemo(
+    () => Object.values(c).filter((e) => e).length,
+    [c]
+  ), i = t.useMemo(() => s === l.columns.length, [l.columns, s]), y = t.useCallback(() => {
     const e = { ...c };
-    Object.keys(e).forEach((n, o) => e[n] = i && o === 0 ? !0 : !i), m(e);
-  }, [c, i]), L = t.useCallback((e, n) => {
-    const o = { ...c };
-    o[n || ""] = e, m(o);
-  }, [c]), v = (e) => {
+    Object.keys(e).forEach(
+      (n, o) => e[n] = i && o === 0 ? !0 : !i
+    ), m(e);
+  }, [c, i]), L = t.useCallback(
+    (e, n) => {
+      const o = { ...c };
+      o[n || ""] = e, m(o);
+    },
+    [c]
+  ), v = (e) => {
     S(String(e.target.value));
   };
   return /* @__PURE__ */ t.createElement("form", { className: "k-filter-menu" }, /* @__PURE__ */ t.createElement("div", { className: "k-filter-menu-container" }, /* @__PURE__ */ t.createElement(

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-grid",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1724738653,
+  publishDate: 1725518841,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-grid",
-  "version": "8.3.0-develop.11",
+  "version": "8.3.0-develop.12",
   "description": "React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,15 +25,15 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.20.1",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "8.3.0-develop.11",
-    "@progress/kendo-react-buttons": "8.3.0-develop.11",
-    "@progress/kendo-react-common": "8.3.0-develop.11",
-    "@progress/kendo-react-data-tools": "8.3.0-develop.11",
-    "@progress/kendo-react-dateinputs": "8.3.0-develop.11",
-    "@progress/kendo-react-dropdowns": "8.3.0-develop.11",
-    "@progress/kendo-react-inputs": "8.3.0-develop.11",
-    "@progress/kendo-react-intl": "8.3.0-develop.11",
-    "@progress/kendo-react-popup": "8.3.0-develop.11",
+    "@progress/kendo-react-animation": "8.3.0-develop.12",
+    "@progress/kendo-react-buttons": "8.3.0-develop.12",
+    "@progress/kendo-react-common": "8.3.0-develop.12",
+    "@progress/kendo-react-data-tools": "8.3.0-develop.12",
+    "@progress/kendo-react-dateinputs": "8.3.0-develop.12",
+    "@progress/kendo-react-dropdowns": "8.3.0-develop.12",
+    "@progress/kendo-react-inputs": "8.3.0-develop.12",
+    "@progress/kendo-react-intl": "8.3.0-develop.12",
+    "@progress/kendo-react-popup": "8.3.0-develop.12",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"