@progress/kendo-react-grid 15.2.0-develop.8 → 16.0.0-develop.2

package/cells/groupcell/utils.mjs

@@ -5,30 +5,30 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as E from "react";
-import { classNames as D } from "@progress/kendo-react-common";
+import * as M from "react";
+import { classNames as R } from "@progress/kendo-react-common";
 import { GridGroupCellToggle as rn } from "./GridGroupCellToggle.mjs";
 import { getClientCellProps as an } from "../../utils/index.mjs";
-const sn = 10, dn = 24, y = (o, e, n, t, r, a) => {
+const sn = 10, dn = 24, y = (o, e, n, t, r, g) => {
   if (!o || !["singleColumn", "multipleColumns"].includes(o))
     return { leadingGroupColumnSpan: void 0, contentColumnSpan: void 0, trailingGroupColumnSpan: void 0 };
   if (!["groupHeader", "groupFooter"].includes(e || ""))
     return { leadingGroupColumnSpan: void 0, contentColumnSpan: void 0, trailingGroupColumnSpan: void 0 };
   if (n === void 0 || t === void 0 || r === void 0)
     return { leadingGroupColumnSpan: void 0, contentColumnSpan: void 0, trailingGroupColumnSpan: void 0 };
-  const s = o === "singleColumn" ? 0 : t;
-  if (a && n < s)
+  const a = o === "singleColumn" ? 0 : t;
+  if (g && n < a)
     return {
       leadingGroupColumnSpan: n + 1,
       contentColumnSpan: void 0,
       trailingGroupColumnSpan: void 0
     };
-  if (n === s) {
-    const C = r - s - 1;
+  if (n === a) {
+    const m = r - a - 1;
     return {
-      leadingGroupColumnSpan: s > 0 ? s : void 0,
+      leadingGroupColumnSpan: a > 0 ? a : void 0,
       contentColumnSpan: 1,
-      trailingGroupColumnSpan: C > 0 ? C : void 0
+      trailingGroupColumnSpan: m > 0 ? m : void 0
     };
   }
   return { leadingGroupColumnSpan: void 0, contentColumnSpan: void 0, trailingGroupColumnSpan: void 0 };
@@ -44,7 +44,7 @@ const sn = 10, dn = 24, y = (o, e, n, t, r, a) => {
     colSpan: n,
     style: { borderLeftWidth: 0, borderRightWidth: 0 }
   }
-}), k = () => ({
+}), G = () => ({
   tdProps: null,
   td2Props: null,
   content: null,
@@ -56,28 +56,28 @@ const sn = 10, dn = 24, y = (o, e, n, t, r, a) => {
     level: n,
     columnsCount: t,
     rowType: r,
-    dataItem: a,
-    field: M,
-    expanded: s,
-    ariaColumnIndex: C,
-    locked: S,
+    dataItem: g,
+    field: w,
+    expanded: a,
+    ariaColumnIndex: m,
+    locked: C,
     style: i,
-    hasCheckboxColumn: G
-  } = o, c = o.groupingMode || "default", d = M || "", J = an(o), R = o.columnPosition || {}, p = c === "singleColumn", P = c === "multipleColumns", T = (j = (W = o.group) == null ? void 0 : W.value) != null ? j : a[d], g = (B = (q = o.group) == null ? void 0 : q.field) != null ? B : d, w = T instanceof Date ? T.toString() : T, x = o.columnFields, b = o.columnTitles, H = o.columnGroupFields, h = o.hiddenColumnTitleByField, I = x && g ? x.indexOf(g) : -1, K = I === -1 && H && g ? H.indexOf(g) : -1, _ = I > -1 ? I : K, Q = g ? h == null ? void 0 : h[g] : void 0, $ = (_ > -1 ? b == null ? void 0 : b[_] : Q) || (g ? g.split(".").slice(-1)[0] : d), A = x && e !== void 0 ? (l) => {
-    const m = x.findIndex(
-      (f, u) => u > e && f === l
+    hasCheckboxColumn: P
+  } = o, d = o.groupingMode || "default", S = w || "", J = an(o), D = o.columnPosition || {}, u = d === "singleColumn", k = d === "multipleColumns", T = (j = (W = o.group) == null ? void 0 : W.value) != null ? j : g[S], c = (B = (q = o.group) == null ? void 0 : q.field) != null ? B : S, b = T instanceof Date ? T.toString() : T, x = o.columnFields, h = o.columnTitles, H = o.columnGroupFields, I = o.hiddenColumnTitleByField, N = x && c ? x.indexOf(c) : -1, K = N === -1 && k && H && c ? H.indexOf(c) : -1, _ = N > -1 ? N : K, Q = c ? I == null ? void 0 : I[c] : void 0, F = (_ > -1 ? h == null ? void 0 : h[_] : Q) || (c ? c.split(".").slice(-1)[0] : S), A = x && e !== void 0 ? (l) => {
+    const p = x.findIndex(
+      (f, s) => s > e && f === l
     );
-    return m === -1 ? void 0 : m;
-  } : void 0, O = !p && !P, V = !!o.isRtl, U = V ? R.right : R.left, X = c === "compact" && n !== void 0 ? n * dn : 0, Y = sn + X, Z = S && O && U !== void 0 ? {
+    return p === -1 ? void 0 : p;
+  } : void 0, O = !u && !k, V = !!o.isRtl, U = V ? D.right : D.left, X = d === "compact" && n !== void 0 ? n * dn : 0, Y = sn + X, Z = C && O && U !== void 0 ? {
     position: "sticky",
     [V ? "right" : "left"]: U + Y,
     zIndex: 2,
     width: "fit-content"
-  } : void 0, z = (l) => S && O ? { ...l, overflow: "visible" } : l, N = (l) => /* @__PURE__ */ E.createElement("div", { className: "k-grouping-row-content", style: Z }, /* @__PURE__ */ E.createElement(rn, { ...J }), /* @__PURE__ */ E.createElement("span", { className: "k-grouping-row-text" }, l)), nn = () => {
+  } : void 0, z = (l) => C && O ? { ...l, overflow: "visible" } : l, L = (l) => /* @__PURE__ */ M.createElement("div", { className: "k-grouping-row-content", style: Z }, /* @__PURE__ */ M.createElement(rn, { ...J }), /* @__PURE__ */ M.createElement("span", { className: "k-grouping-row-text" }, l)), nn = () => {
     if (t === void 0 || e === void 0)
-      return k();
+      return G();
     if (r === "groupFooter")
-      return e !== 0 ? k() : {
+      return e !== 0 ? G() : {
         tdProps: {
           className: "k-table-td",
           style: i,
@@ -87,10 +87,10 @@ const sn = 10, dn = 24, y = (o, e, n, t, r, a) => {
         td2Props: null,
         content: null,
         renderToggleCell: !1,
-        hasCheckboxColumn: !!G
+        hasCheckboxColumn: !!P
       };
-    if (e !== 0 || r !== "groupHeader" || a[d] === void 0)
-      return k();
+    if (e !== 0 || r !== "groupHeader" || g[S] === void 0)
+      return G();
     const l = n !== void 0 ? {
       ...i,
       "--kendo-grid-grouping-level": n,
@@ -104,28 +104,28 @@ const sn = 10, dn = 24, y = (o, e, n, t, r, a) => {
         key: "g-noi-colspan",
         role: "gridcell",
         "aria-selected": !1,
-        "aria-expanded": s,
-        "aria-colindex": C
+        "aria-expanded": a,
+        "aria-colindex": m
       },
       td2Props: null,
-      content: N(`${$}: ${w}`),
+      content: L(`${F}: ${b}`),
       renderToggleCell: !0,
-      hasCheckboxColumn: !!G
+      hasCheckboxColumn: !!P
     };
   }, en = () => {
-    const l = p ? 0 : n;
-    if (!(e === l && l !== void 0 && t !== void 0 && a[d] !== void 0)) {
-      if (!(P && n !== void 0 && e !== void 0 && e < n))
-        return k();
+    const l = u ? 0 : n;
+    if (!(e === l && l !== void 0 && t !== void 0 && g[S] !== void 0)) {
+      if (!(k && n !== void 0 && e !== void 0 && e < n))
+        return G();
       const tn = {
         style: i,
         key: "g" + e,
-        className: D("k-table-td", "k-table-group-td", "k-group-cell", {
-          "k-grid-content-sticky": S
+        className: R("k-table-td", "k-table-group-td", "k-group-cell", {
+          "k-grid-content-sticky": C
         }),
         role: "gridcell"
-      }, L = y(
-        c,
+      }, $ = y(
+        d,
         r,
         e,
         n,
@@ -138,56 +138,56 @@ const sn = 10, dn = 24, y = (o, e, n, t, r, a) => {
         content: null,
         renderToggleCell: !1,
         isSpacerCell: !0,
-        leadingGroupColumnSpan: L.leadingGroupColumnSpan,
-        contentColumnSpan: L.contentColumnSpan,
-        trailingGroupColumnSpan: L.trailingGroupColumnSpan
+        leadingGroupColumnSpan: $.leadingGroupColumnSpan,
+        contentColumnSpan: $.contentColumnSpan,
+        trailingGroupColumnSpan: $.trailingGroupColumnSpan
       };
     }
-    const f = p && n !== void 0 ? {
+    const f = u && n !== void 0 ? {
       ...i,
       "--kendo-grid-grouping-level": n,
       paddingInlineStart: `calc(var(--kendo-spacing-2.5, 10px) + ${n} * var(--kendo-spacing-6, 24px))`
     } : i;
-    let u = {
+    let s = {
       className: "k-table-td",
       style: f,
-      key: p ? "g-single-column" : "g-multi-column",
+      key: u ? "g-single-column" : "g-multi-column",
       role: "gridcell",
       "aria-selected": !1,
-      "aria-expanded": s,
-      "aria-colindex": C
+      "aria-expanded": a,
+      "aria-colindex": m
     }, v = t - l - 1 > 0 ? { className: "k-table-td", role: "gridcell", colSpan: t - l - 1 } : null;
-    S && ({ tdProps: u, td2Props: v } = un(
-      u,
+    C && ({ tdProps: s, td2Props: v } = un(
+      s,
       f,
       t - l
     ));
-    const F = y(c, r, e, n, t, !1);
+    const E = y(d, r, e, n, t, !1);
     return {
-      tdProps: u,
+      tdProps: s,
       td2Props: v,
-      content: N(`${$}: ${w}`),
+      content: L(`${F}: ${b}`),
       renderToggleCell: !0,
-      hasCheckboxColumn: !!G,
-      leadingGroupColumnSpan: F.leadingGroupColumnSpan,
-      contentColumnSpan: F.contentColumnSpan,
-      trailingGroupColumnSpan: F.trailingGroupColumnSpan,
+      hasCheckboxColumn: !!P,
+      leadingGroupColumnSpan: E.leadingGroupColumnSpan,
+      contentColumnSpan: E.contentColumnSpan,
+      trailingGroupColumnSpan: E.trailingGroupColumnSpan,
       getColumnIndexForField: A
     };
   }, on = () => {
     if (n === void 0 || e === void 0 || t === void 0)
-      return k();
-    const l = p ? 0 : n, m = {
+      return G();
+    const l = u ? 0 : n, p = {
       style: i,
       key: "g" + e,
-      className: D("k-table-td", "k-table-group-td", "k-group-cell", {
-        "k-grid-content-sticky": S
+      className: R("k-table-td", "k-table-group-td", "k-group-cell", {
+        "k-grid-content-sticky": C
       }),
       role: "gridcell"
     };
     if (e > l)
       return {
-        tdProps: m,
+        tdProps: p,
         td2Props: null,
         content: null,
         renderToggleCell: !1,
@@ -195,7 +195,7 @@ const sn = 10, dn = 24, y = (o, e, n, t, r, a) => {
       };
     if (e < l) {
       const v = y(
-        c,
+        d,
         r,
         e,
         n,
@@ -203,7 +203,7 @@ const sn = 10, dn = 24, y = (o, e, n, t, r, a) => {
         !0
       );
       return {
-        tdProps: m,
+        tdProps: p,
         td2Props: null,
         content: null,
         renderToggleCell: !1,
@@ -216,25 +216,25 @@ const sn = 10, dn = 24, y = (o, e, n, t, r, a) => {
     const f = {
       className: "k-table-td",
       style: i,
-      key: p ? "g-single-footer" : "g-multi-footer",
+      key: u ? "g-single-footer" : "g-multi-footer",
       role: "gridcell"
-    }, u = y(c, r, e, n, t, !1);
+    }, s = y(d, r, e, n, t, !1);
     return {
       tdProps: f,
       td2Props: null,
       content: null,
       renderToggleCell: !1,
-      hasCheckboxColumn: !!G,
-      leadingGroupColumnSpan: u.leadingGroupColumnSpan,
-      contentColumnSpan: u.contentColumnSpan,
-      trailingGroupColumnSpan: u.trailingGroupColumnSpan,
+      hasCheckboxColumn: !!P,
+      leadingGroupColumnSpan: s.leadingGroupColumnSpan,
+      contentColumnSpan: s.contentColumnSpan,
+      trailingGroupColumnSpan: s.trailingGroupColumnSpan,
       getColumnIndexForField: A
     };
-  }, ln = () => e === void 0 || n === void 0 || e < n || t === void 0 || r !== "groupHeader" || a[d] === void 0 ? {
+  }, ln = () => e === void 0 || n === void 0 || e < n || t === void 0 || r !== "groupHeader" || g[S] === void 0 ? {
     tdProps: {
       style: i,
       key: "g" + e,
-      className: D("k-table-td", "k-group-cell", { "k-grid-content-sticky": S }),
+      className: R("k-table-td", "k-group-cell", { "k-grid-content-sticky": C }),
       role: "gridcell"
     },
     td2Props: null,
@@ -249,17 +249,15 @@ const sn = 10, dn = 24, y = (o, e, n, t, r, a) => {
       key: "g-colspan",
       role: "gridcell",
       "aria-selected": !1,
-      "aria-expanded": s,
-      "aria-colindex": C
+      "aria-expanded": a,
+      "aria-colindex": m
     },
     td2Props: null,
-    content: N(
-      a[d] instanceof Date ? a[d].toString() : a[d]
-    ),
+    content: L(`${F}: ${b}`),
     renderToggleCell: !0,
     isSpacerCell: !1
   };
-  return c === "compact" ? nn() : (p || P) && r === "groupHeader" ? en() : (P || p) && r === "groupFooter" ? on() : ln();
+  return d === "compact" ? nn() : (u || k) && r === "groupHeader" ? en() : (k || u) && r === "groupFooter" ? on() : ln();
 }, fn = (o) => {
   var e, n;
   return (n = (e = o.cells) == null ? void 0 : e.group) == null ? void 0 : n[o.rowType || "data"];

package/codemods/v16/grid-grouping-row-rendering-changes.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@progress/kendo-react-common/codemods"),r=`Review your stylesheets, test files, and any code that references the k-reset, k-grouping-row-content, and k-grouping-row-text CSS classes on the Grid grouping row content.
+Before: The grouping row content was wrapped in a <p className="k-reset"> element.
+After:  The grouping row content is now wrapped in a <div className="k-grouping-row-content"><span className="k-grouping-row-text"> element structure.
+Update any CSS selectors or className references that target the Grid grouping row content to account for the changed wrapper element and class names.
+
+Additionally, the text content of each grouping row has changed format.
+Before: The grouping row text showed only the field value (e.g. "Alice Mutton").
+After:  The grouping row text now includes the column title as a prefix (e.g. "Product Name: Alice Mutton").
+Update any assertions or code that reads the grouping row text to account for the "[Field Title]: [Value]" format.`,n=["k-reset","k-grouping-row-content","k-grouping-row-text"],o=t.makePattern(n);function a(e){return t.isRenderingChangeTarget(e.path)&&o.test(e.source)&&t.writeInstructionMarker(r,__filename,e.path),e.source}exports.aiInstructions=r;exports.default=a;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC1ncm91cGluZy1yb3ctcmVuZGVyaW5nLWNoYW5nZXMuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2dyaWQvY29kZW1vZHMvdjE2L2dyaWQtZ3JvdXBpbmctcm93LXJlbmRlcmluZy1jaGFuZ2VzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZpbGVJbmZvIH0gZnJvbSAnanNjb2Rlc2hpZnQnO1xuaW1wb3J0IHsgbWFrZVBhdHRlcm4sIHdyaXRlSW5zdHJ1Y3Rpb25NYXJrZXIsIGlzUmVuZGVyaW5nQ2hhbmdlVGFyZ2V0IH0gZnJvbSAnQHByb2dyZXNzL2tlbmRvLXJlYWN0LWNvbW1vbi9jb2RlbW9kcyc7XG5cbmV4cG9ydCBjb25zdCBhaUluc3RydWN0aW9ucyA9IGBSZXZpZXcgeW91ciBzdHlsZXNoZWV0cywgdGVzdCBmaWxlcywgYW5kIGFueSBjb2RlIHRoYXQgcmVmZXJlbmNlcyB0aGUgay1yZXNldCwgay1ncm91cGluZy1yb3ctY29udGVudCwgYW5kIGstZ3JvdXBpbmctcm93LXRleHQgQ1NTIGNsYXNzZXMgb24gdGhlIEdyaWQgZ3JvdXBpbmcgcm93IGNvbnRlbnQuXG5CZWZvcmU6IFRoZSBncm91cGluZyByb3cgY29udGVudCB3YXMgd3JhcHBlZCBpbiBhIDxwIGNsYXNzTmFtZT1cImstcmVzZXRcIj4gZWxlbWVudC5cbkFmdGVyOiAgVGhlIGdyb3VwaW5nIHJvdyBjb250ZW50IGlzIG5vdyB3cmFwcGVkIGluIGEgPGRpdiBjbGFzc05hbWU9XCJrLWdyb3VwaW5nLXJvdy1jb250ZW50XCI+PHNwYW4gY2xhc3NOYW1lPVwiay1ncm91cGluZy1yb3ctdGV4dFwiPiBlbGVtZW50IHN0cnVjdHVyZS5cblVwZGF0ZSBhbnkgQ1NTIHNlbGVjdG9ycyBvciBjbGFzc05hbWUgcmVmZXJlbmNlcyB0aGF0IHRhcmdldCB0aGUgR3JpZCBncm91cGluZyByb3cgY29udGVudCB0byBhY2NvdW50IGZvciB0aGUgY2hhbmdlZCB3cmFwcGVyIGVsZW1lbnQgYW5kIGNsYXNzIG5hbWVzLlxuXG5BZGRpdGlvbmFsbHksIHRoZSB0ZXh0IGNvbnRlbnQgb2YgZWFjaCBncm91cGluZyByb3cgaGFzIGNoYW5nZWQgZm9ybWF0LlxuQmVmb3JlOiBUaGUgZ3JvdXBpbmcgcm93IHRleHQgc2hvd2VkIG9ubHkgdGhlIGZpZWxkIHZhbHVlIChlLmcuIFwiQWxpY2UgTXV0dG9uXCIpLlxuQWZ0ZXI6ICBUaGUgZ3JvdXBpbmcgcm93IHRleHQgbm93IGluY2x1ZGVzIHRoZSBjb2x1bW4gdGl0bGUgYXMgYSBwcmVmaXggKGUuZy4gXCJQcm9kdWN0IE5hbWU6IEFsaWNlIE11dHRvblwiKS5cblVwZGF0ZSBhbnkgYXNzZXJ0aW9ucyBvciBjb2RlIHRoYXQgcmVhZHMgdGhlIGdyb3VwaW5nIHJvdyB0ZXh0IHRvIGFjY291bnQgZm9yIHRoZSBcIltGaWVsZCBUaXRsZV06IFtWYWx1ZV1cIiBmb3JtYXQuYDtcblxuY29uc3QgY2xhc3NlcyA9IFsnay1yZXNldCcsICdrLWdyb3VwaW5nLXJvdy1jb250ZW50JywgJ2stZ3JvdXBpbmctcm93LXRleHQnXTtcbmNvbnN0IHBhdHRlcm4gPSBtYWtlUGF0dGVybihjbGFzc2VzKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gKGZpbGVJbmZvOiBGaWxlSW5mbykge1xuICAgIGlmIChpc1JlbmRlcmluZ0NoYW5nZVRhcmdldChmaWxlSW5mby5wYXRoKSkge1xuICAgICAgICBpZiAocGF0dGVybi50ZXN0KGZpbGVJbmZvLnNvdXJjZSkpIHtcbiAgICAgICAgICAgIHdyaXRlSW5zdHJ1Y3Rpb25NYXJrZXIoYWlJbnN0cnVjdGlvbnMsIF9fZmlsZW5hbWUsIGZpbGVJbmZvLnBhdGgpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcmV0dXJuIGZpbGVJbmZvLnNvdXJjZTtcbn1cbiJdLCJuYW1lcyI6WyJhaUluc3RydWN0aW9ucyIsImNsYXNzZXMiLCJwYXR0ZXJuIiwibWFrZVBhdHRlcm4iLCJncmlkR3JvdXBpbmdSb3dSZW5kZXJpbmdDaGFuZ2VzIiwiZmlsZUluZm8iLCJpc1JlbmRlcmluZ0NoYW5nZVRhcmdldCIsIndyaXRlSW5zdHJ1Y3Rpb25NYXJrZXIiXSwibWFwcGluZ3MiOiJxS0FHYUEsRUFBaUI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLG9IQVV4QkMsRUFBVSxDQUFDLFVBQVcseUJBQTBCLHFCQUFxQixFQUNyRUMsRUFBVUMsRUFBQUEsWUFBWUYsQ0FBTyxFQUVuQyxTQUFBRyxFQUF5QkMsRUFBb0IsQ0FDekMsT0FBSUMsRUFBQUEsd0JBQXdCRCxFQUFTLElBQUksR0FDakNILEVBQVEsS0FBS0csRUFBUyxNQUFNLEdBQzVCRSxFQUFBQSx1QkFBdUJQLEVBQWdCLFdBQVlLLEVBQVMsSUFBSSxFQUlqRUEsRUFBUyxNQUNwQiJ9

package/codemods/v16/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./grid-grouping-row-rendering-changes.js");exports.GridGroupingRowRenderingChanges=e.default;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=