@progress/kendo-react-grid 9.3.1 → 9.4.0-develop.10

package/header/FilterRow.mjs

@@ -5,80 +5,82 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";
-import * as s from "react";
-import { useLocalization as L } from "@progress/kendo-react-intl";
-import { GridFilterCell as y } from "../cells/GridFilterCell.mjs";
-import { getFilterType as R, operatorMap as v, booleanFilterValues as w } from "../filterCommon.mjs";
-import { tableKeyboardNavigationTools as T, HeaderTdElement as N } from "@progress/kendo-react-data-tools";
-import { filterAriaLabel as F, messages as z } from "../messages/index.mjs";
+import * as i from "react";
+import { GridFilterCell as R } from "../cells/GridFilterCell.mjs";
+import { getFilterType as h, operatorMap as b, booleanFilterValues as w } from "../filterCommon.mjs";
+import { tableKeyboardNavigationTools as z, HeaderTdElement as N } from "@progress/kendo-react-data-tools";
+import { filterAriaLabel as u, messages as P } from "../messages/index.mjs";
 import { classNames as A } from "@progress/kendo-react-common";
-import { resolveCells as S } from "../utils/index.mjs";
-const $ = "k-table-row k-filter-row", M = (t) => {
-  const d = L(), b = (e, r) => {
+import { clientColumn as G, isClientReference as F, resolveCells as S } from "../utils/index.mjs";
+import { GridFilterCellContainer as E } from "./client/GridFilterCellContainer.mjs";
+import { GridFilterCellElementContainer as $ } from "./client/GridFilterCellElementContainer.mjs";
+const O = "k-table-row k-filter-row", B = (t) => {
+  const x = (e, r) => {
     let l = `${r ? "k-grid-header-sticky" : ""}`;
-    return t.sort && t.sort.filter((a) => a.field === e).length > 0 && (l += " k-sorted"), l;
-  }, x = (e, r, l, a) => {
-    if (!t.filterChange)
-      return;
-    const i = [];
-    (e !== "" && e !== null || r !== "") && i.push({
-      field: l,
-      operator: r,
-      value: e
-    }), t.filter && t.filter.filters && (t.filter.filters || []).forEach((g) => {
-      const n = g;
-      n && n.field !== l && i.push(n);
-    });
-    const o = t.filter && t.filter.logic ? t.filter.logic : "and";
-    t.filterChange(i.length > 0 ? { logic: o, filters: i } : null, a);
-  }, E = t.filter && t.filter.filters || [], k = (e) => {
+    return t.sort && t.sort.filter((o) => o.field === e).length > 0 && (l += " k-sorted"), l;
+  }, T = t.filter && t.filter.filters || [], k = (e) => {
     if (e === void 0)
       return;
-    const r = E.filter(
+    const r = T.filter(
       (l) => l.field === e
     );
     return r.length ? r[0] : void 0;
   };
-  let u = 0, h = -1;
+  let y = 0, m = -1;
   const I = t.columns.filter((e) => e.children.length === 0).map((e) => {
-    const r = R(e.filter), l = k(e.field), a = `${e.field} ${d.toLanguageString(
-      F,
-      z[F]
+    const r = h(e.filter), l = k(e.field), o = `${e.field} ${t.localization.toLanguageString(
+      u,
+      P[u]
     )}`;
-    let i = l && l.value;
-    i === void 0 && (i = r === "text" ? "" : null);
-    const o = e.filterable && {
-      render: t.cellRender,
+    let n = l && l.value;
+    n === void 0 && (n = r === "text" ? "" : null);
+    const s = e.filterable && {
       field: e.field,
       title: e.filterTitle,
-      value: i,
+      value: n,
       operator: l && l.operator,
-      operators: v(t.filterOperators[r] || [], d),
-      booleanValues: v(w, d),
+      operators: b(t.filterOperators[r] || [], t.localization),
+      booleanValues: b(w, t.localization),
       filterType: r,
-      ariaLabel: a,
-      onChange: (f) => {
-        x(f.value, f.operator, e.field, f.syntheticEvent);
-      }
-    }, c = e.declarationIndex >= 0 ? ++h : --u, g = e.left !== void 0 ? t.isRtl ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {}, n = {
-      columnId: T.getFilterColumnId(e.id),
+      ariaLabel: e.columnType === "reorder" ? "" : o,
+      size: t.size
+    }, d = e.declarationIndex >= 0 ? ++m : --y, C = {
+      columnId: z.getFilterColumnId(e.id),
       navigatable: e.navigatable || t.navigatable,
-      style: g,
-      className: A("k-table-td", b(e.field, e.locked) || void 0),
+      className: A("k-table-td", x(e.field, e.locked) || void 0),
       role: "gridcell",
-      ariaLabel: a,
+      ariaLabel: e.columnType === "reorder" ? void 0 : o,
       ariaColumnIndex: e.ariaColumnIndex
-    }, m = o && (e.filterCell ? /* @__PURE__ */ s.createElement(e.filterCell, { ...o }) : /* @__PURE__ */ s.createElement(y, { size: t.size, ...o })), C = S(t.cells, e.cells);
-    if (C && C.filterCell) {
-      const f = C.filterCell;
-      return /* @__PURE__ */ s.createElement(f, { key: c, ...o, tdProps: n, index: h }, m);
+    }, g = G(e), v = {
+      column: g,
+      filter: t.filter,
+      field: e.field,
+      render: t.cellRender
+    };
+    let f = null;
+    if (s && e.columnType !== "reorder") {
+      const a = e.filterCell ? e.filterCell : R;
+      f = /* @__PURE__ */ i.createElement(E, { ...v, isClient: F(a) }, /* @__PURE__ */ i.createElement(a, { ...s }));
+    }
+    const c = S(t.cells, e.cells);
+    if (c && c.filterCell) {
+      const a = c.filterCell, L = F(a);
+      return /* @__PURE__ */ i.createElement(
+        E,
+        {
+          key: d,
+          ...v,
+          isClient: L,
+          isCustom: !0
+        },
+        /* @__PURE__ */ i.createElement(a, { key: d, ...s, tdProps: C, index: m }, f)
+      );
     }
-    return /* @__PURE__ */ s.createElement(N, { key: c, ...n }, m);
+    return /* @__PURE__ */ i.createElement($, { key: d, column: g }, /* @__PURE__ */ i.createElement(N, { ...C }, f));
   });
-  return /* @__PURE__ */ s.createElement("tr", { className: $, "aria-rowindex": t.ariaRowIndex, role: "row" }, I);
+  return /* @__PURE__ */ i.createElement("tr", { className: O, "aria-rowindex": t.ariaRowIndex, role: "row" }, I);
 };
 export {
-  $ as FILTER_ROW_CLASS,
-  M as FilterRow
+  O as FILTER_ROW_CLASS,
+  B as FilterRow
 };

package/header/GridHeaderCell.js

@@ -5,4 +5,5 @@
  * 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 l=require("@progress/kendo-react-common"),u=require("react"),i=require("../columnMenu/GridColumnMenuWrapper.js");function o(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const c=o(u),d=e=>{const t=l.useUnstyled(),n=t&&t.uGrid?t.uGrid:l.uGrid,{columnMenuWrapperProps:r}=e,s=e.onClick?{onClick:e.onClick}:{},a=c.createElement("span",{className:l.classNames(n.headerCellInner({}))},c.createElement("span",{className:l.classNames(n.headerCellLink({sortable:e.columnMenuWrapperProps.sortable})),...s},c.createElement("span",{className:l.classNames(n.columnTitle({}))},e.title||e.field||" "),e.children),r.columnMenu&&c.createElement(i.GridColumnMenuWrapper,{...r}));return e.render?e.render.call(void 0,a,e):a};exports.GridHeaderCell=d;
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@progress/kendo-react-common"),s=require("react"),u=require("../columnMenu/GridColumnMenuWrapper.js");function o(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const a=o(s),i=e=>{const t=r.useUnstyled(),n=t&&t.uGrid?t.uGrid:r.uGrid,l=e.onClick?{onClick:e.onClick}:{},c=a.createElement("span",{className:r.classNames(n.headerCellInner({}))},a.createElement("span",{className:r.classNames(n.headerCellLink({sortable:e.columnMenuWrapperProps.sortable})),...l},a.createElement("span",{className:r.classNames(n.columnTitle({}))},e.title||e.field||" "),e.children),e.columnMenuWrapperProps.columnMenu&&a.createElement(u.GridColumnMenuWrapper,{...e.columnMenuWrapperProps}));return e.render?e.render.call(void 0,c,e):c};exports.GridHeaderCell=i;

package/header/GridHeaderCell.mjs

@@ -6,27 +6,27 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import { useUnstyled as s, uGrid as m, classNames as t } from "@progress/kendo-react-common";
+import { useUnstyled as i, uGrid as m, classNames as a } from "@progress/kendo-react-common";
 import * as n from "react";
-import { GridColumnMenuWrapper as d } from "../columnMenu/GridColumnMenuWrapper.mjs";
-const C = (e) => {
-  const l = s(), r = l && l.uGrid ? l.uGrid : m, { columnMenuWrapperProps: a } = e, i = e.onClick ? {
+import { GridColumnMenuWrapper as s } from "../columnMenu/GridColumnMenuWrapper.mjs";
+const o = (e) => {
+  const l = i(), r = l && l.uGrid ? l.uGrid : m, c = e.onClick ? {
     onClick: e.onClick
-  } : {}, c = /* @__PURE__ */ n.createElement("span", { className: t(r.headerCellInner({})) }, /* @__PURE__ */ n.createElement(
+  } : {}, t = /* @__PURE__ */ n.createElement("span", { className: a(r.headerCellInner({})) }, /* @__PURE__ */ n.createElement(
     "span",
     {
-      className: t(
+      className: a(
         r.headerCellLink({
           sortable: e.columnMenuWrapperProps.sortable
         })
       ),
-      ...i
+      ...c
     },
-    /* @__PURE__ */ n.createElement("span", { className: t(r.columnTitle({})) }, e.title || e.field || " "),
+    /* @__PURE__ */ n.createElement("span", { className: a(r.columnTitle({})) }, e.title || e.field || " "),
     e.children
-  ), a.columnMenu && /* @__PURE__ */ n.createElement(d, { ...a }));
-  return e.render ? e.render.call(void 0, c, e) : c;
+  ), e.columnMenuWrapperProps.columnMenu && /* @__PURE__ */ n.createElement(s, { ...e.columnMenuWrapperProps }));
+  return e.render ? e.render.call(void 0, t, e) : t;
 };
 export {
-  C as GridHeaderCell
+  o as GridHeaderCell
 };

package/header/GridHeaderSelectionCell.js

@@ -5,4 +5,5 @@
  * 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 u=require("react"),d=require("../columnMenu/GridColumnMenuWrapper.js"),a=require("../messages/index.js"),s=require("@progress/kendo-react-intl"),m=require("@progress/kendo-react-common");function b(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const r=b(u),g=e=>{const n=m.useId(),t=s.useLocalization(),c=e.id||n,{columnMenuWrapperProps:l}=e,o=[r.createElement("span",{key:0,className:"k-checkbox-wrap"},r.createElement("input",{id:c,type:"checkbox",tabIndex:-1,className:"k-checkbox k-checkbox-md k-rounded-md","aria-label":t.toLanguageString(a.selectRow,a.messages[a.selectRow]),"aria-checked":e.selectionValue,checked:e.selectionValue,onChange:i=>e.selectionChange({field:e.field,syntheticEvent:i})})),l.columnMenu&&r.createElement(d.GridColumnMenuWrapper,{...l})];return e.render?e.render.call(void 0,o,e):o};exports.GridHeaderSelectionCell=g;
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),d=require("../columnMenu/GridColumnMenuWrapper.js"),a=require("../messages/index.js"),s=require("@progress/kendo-react-intl"),m=require("@progress/kendo-react-common"),g=require("../GridClientWrapper.js");function b(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const r=b(u),k=e=>{const n=r.useContext(g.GridContext),t=m.useId(),c=s.useLocalization(),l=e.id||t,o=[r.createElement("span",{key:0,className:"k-checkbox-wrap"},r.createElement("input",{id:l,type:"checkbox",tabIndex:-1,className:"k-checkbox k-checkbox-md k-rounded-md","aria-label":c.toLanguageString(a.selectRow,a.messages[a.selectRow]),"aria-checked":e.selectionValue,checked:e.selectionValue,onChange:i=>n.onHeaderSelectionChange({field:e.field,syntheticEvent:i})})),e.columnMenuWrapperProps.columnMenu&&r.createElement(d.GridColumnMenuWrapper,{...e.columnMenuWrapperProps})];return e.render?e.render.call(void 0,o,e):o};exports.GridHeaderSelectionCell=k;

package/header/GridHeaderSelectionCell.mjs

@@ -6,32 +6,33 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as n from "react";
+import * as t from "react";
 import { GridColumnMenuWrapper as d } from "../columnMenu/GridColumnMenuWrapper.mjs";
-import { selectRow as a, messages as m } from "../messages/index.mjs";
+import { selectRow as c, messages as m } from "../messages/index.mjs";
 import { useLocalization as u } from "@progress/kendo-react-intl";
 import { useId as s } from "@progress/kendo-react-common";
+import { GridContext as k } from "../GridClientWrapper.mjs";
 const b = (e) => {
-  const l = s(), o = u(), i = e.id || l, { columnMenuWrapperProps: t } = e, c = [
-    /* @__PURE__ */ n.createElement("span", { key: 0, className: "k-checkbox-wrap" }, /* @__PURE__ */ n.createElement(
+  const o = t.useContext(k), a = s(), r = u(), i = e.id || a, n = [
+    /* @__PURE__ */ t.createElement("span", { key: 0, className: "k-checkbox-wrap" }, /* @__PURE__ */ t.createElement(
       "input",
       {
         id: i,
         type: "checkbox",
         tabIndex: -1,
         className: "k-checkbox k-checkbox-md k-rounded-md",
-        "aria-label": o.toLanguageString(a, m[a]),
+        "aria-label": r.toLanguageString(c, m[c]),
         "aria-checked": e.selectionValue,
         checked: e.selectionValue,
-        onChange: (r) => e.selectionChange({
+        onChange: (l) => o.onHeaderSelectionChange({
           field: e.field,
-          syntheticEvent: r
+          syntheticEvent: l
         })
       }
     )),
-    t.columnMenu && /* @__PURE__ */ n.createElement(d, { ...t })
+    e.columnMenuWrapperProps.columnMenu && /* @__PURE__ */ t.createElement(d, { ...e.columnMenuWrapperProps })
   ];
-  return e.render ? e.render.call(void 0, c, e) : c;
+  return e.render ? e.render.call(void 0, n, e) : n;
 };
 export {
   b as GridHeaderSelectionCell

package/header/GroupPanel.js

@@ -5,4 +5,5 @@
  * 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 m=require("react"),p=require("../drag/GroupingIndicator.js"),b=require("@progress/kendo-react-intl"),a=require("../messages/index.js");function f(e){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(l,r,c.get?c:{enumerable:!0,get:()=>e[r]})}}return l.default=e,Object.freeze(l)}const i=f(m),P=e=>{const l=(o,n)=>{const t=e.group.slice();t.splice(n,1),e.groupChange(t,o)},r=(o,n,t,s)=>{const d=Object.assign({},t,{dir:s}),g=e.group.slice();g.splice(n,1,d),e.groupChange(g,o)},c=b.useLocalization(),u=(e.group||[]).map((o,n)=>i.createElement(p.GroupingIndicator,{key:n,index:n,dir:o.dir||"asc",title:e.resolveTitle(o.field),onRemove:t=>{l(t,n)},onSortChange:(t,s)=>{r(t,n,o,s)},onPress:e.pressHandler,onDrag:e.dragHandler,onRelease:e.releaseHandler,onContextMenu:e.onContextMenu}));return i.createElement("div",{ref:e.refCallback,className:"k-grouping-header",role:"toolbar","aria-label":c.toLanguageString(a.groupPanelAriaLabel,a.messages[a.groupPanelAriaLabel]),"aria-controls":e.ariaControls||""},i.createElement("div",{className:"k-chip-list k-chip-list-md",role:"none"},u),i.createElement("div",{className:"k-grouping-drop-container"},!u.length&&c.toLanguageString(a.groupPanelEmpty,a.messages[a.groupPanelEmpty])," "))};exports.GroupPanel=P;
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),P=require("../drag/GroupingIndicator.js"),C=require("@progress/kendo-react-intl"),c=require("../messages/index.js"),G=require("../GridClientWrapper.js");function v(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const s=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(t,a,s.get?s:{enumerable:!0,get:()=>r[a]})}}return t.default=r,Object.freeze(t)}const l=v(b),R=r=>{const t=l.useContext(G.GridContext),a=(o,e)=>{const n=r.group.slice();n.splice(e,1),t.groupChange(n,o)},s=(o,e,n,i)=>{const f=Object.assign({},n,{dir:i}),p=r.group.slice();p.splice(e,1,f),t.groupChange(p,o)},u=C.useLocalization(),d=r.group||[],m=o=>{const e=r.columns.find(i=>i.field===o),n=e&&(e.title||e.field);return n===void 0?o:n},g=d.map((o,e)=>l.createElement(P.GroupingIndicator,{key:e,index:e,dir:o.dir||"asc",title:m(o.field),onRemove:n=>{a(n,e)},onSortChange:(n,i)=>{s(n,e,o,i)},onPress:t.dragLogicRef.current.pressHandler,onDrag:t.dragLogicRef.current.dragHandler,onRelease:t.dragLogicRef.current.releaseHandler,onContextMenu:t.onContextMenu}));return l.createElement("div",{ref:t.dragLogicRef.current.refGroupPanelDiv,className:"k-grouping-header",role:"toolbar","aria-label":u.toLanguageString(c.groupPanelAriaLabel,c.messages[c.groupPanelAriaLabel]),"aria-controls":r.ariaControls||""},l.createElement("div",{className:"k-chip-list k-chip-list-md",role:"none"},g),l.createElement("div",{className:"k-grouping-drop-container"},!g.length&&u.toLanguageString(c.groupPanelEmpty,c.messages[c.groupPanelEmpty])," "))};exports.GroupPanel=R;

package/header/GroupPanel.mjs

@@ -6,49 +6,53 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as r from "react";
-import { GroupingIndicator as h } from "../drag/GroupingIndicator.mjs";
-import { useLocalization as C } from "@progress/kendo-react-intl";
-import { groupPanelAriaLabel as c, messages as g, groupPanelEmpty as u } from "../messages/index.mjs";
-const P = (e) => {
-  const m = (a, o) => {
-    const n = e.group.slice();
-    n.splice(o, 1), e.groupChange(n, a);
-  }, d = (a, o, n, t) => {
-    const p = Object.assign({}, n, { dir: t }), s = e.group.slice();
-    s.splice(o, 1, p), e.groupChange(s, a);
-  }, l = C(), i = (e.group || []).map((a, o) => /* @__PURE__ */ r.createElement(
-    h,
+import * as i from "react";
+import { GroupingIndicator as v } from "../drag/GroupingIndicator.mjs";
+import { useLocalization as G } from "@progress/kendo-react-intl";
+import { groupPanelAriaLabel as g, messages as u, groupPanelEmpty as m } from "../messages/index.mjs";
+import { GridContext as L } from "../GridClientWrapper.mjs";
+const b = (t) => {
+  const n = i.useContext(L), p = (r, e) => {
+    const o = t.group.slice();
+    o.splice(e, 1), n.groupChange(o, r);
+  }, d = (r, e, o, a) => {
+    const h = Object.assign({}, o, { dir: a }), s = t.group.slice();
+    s.splice(e, 1, h), n.groupChange(s, r);
+  }, l = G(), f = t.group || [], C = (r) => {
+    const e = t.columns.find((a) => a.field === r), o = e && (e.title || e.field);
+    return o === void 0 ? r : o;
+  }, c = f.map((r, e) => /* @__PURE__ */ i.createElement(
+    v,
     {
-      key: o,
-      index: o,
-      dir: a.dir || "asc",
-      title: e.resolveTitle(a.field),
-      onRemove: (n) => {
-        m(n, o);
+      key: e,
+      index: e,
+      dir: r.dir || "asc",
+      title: C(r.field),
+      onRemove: (o) => {
+        p(o, e);
       },
-      onSortChange: (n, t) => {
-        d(n, o, a, t);
+      onSortChange: (o, a) => {
+        d(o, e, r, a);
       },
-      onPress: e.pressHandler,
-      onDrag: e.dragHandler,
-      onRelease: e.releaseHandler,
-      onContextMenu: e.onContextMenu
+      onPress: n.dragLogicRef.current.pressHandler,
+      onDrag: n.dragLogicRef.current.dragHandler,
+      onRelease: n.dragLogicRef.current.releaseHandler,
+      onContextMenu: n.onContextMenu
     }
   ));
-  return /* @__PURE__ */ r.createElement(
+  return /* @__PURE__ */ i.createElement(
     "div",
     {
-      ref: e.refCallback,
+      ref: n.dragLogicRef.current.refGroupPanelDiv,
       className: "k-grouping-header",
       role: "toolbar",
-      "aria-label": l.toLanguageString(c, g[c]),
-      "aria-controls": e.ariaControls || ""
+      "aria-label": l.toLanguageString(g, u[g]),
+      "aria-controls": t.ariaControls || ""
     },
-    /* @__PURE__ */ r.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, i),
-    /* @__PURE__ */ r.createElement("div", { className: "k-grouping-drop-container" }, !i.length && l.toLanguageString(u, g[u]), " ")
+    /* @__PURE__ */ i.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, c),
+    /* @__PURE__ */ i.createElement("div", { className: "k-grouping-drop-container" }, !c.length && l.toLanguageString(m, u[m]), " ")
   );
 };
 export {
-  P as GroupPanel
+  b as GroupPanel
 };

package/header/Header.js

@@ -5,4 +5,5 @@
  * 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 N=require("react"),r=require("@progress/kendo-react-common"),f=require("@progress/kendo-react-data-tools");function h(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const l=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,l.get?l:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const a=h(N),m=a.forwardRef((e,n)=>{const t=a.useRef(null),l=a.useRef(null),o=a.useRef(!1),b=r.useRtl(e.elemRef);e.columnResize&&e.columnResize.setIsRtl(b==="rtl"),a.useImperativeHandle(n,()=>({setScrollLeft:c=>{t.current&&t.current.scrollLeft!==c&&(o.current=!0,t.current.scrollLeft=c)},setWidth:c=>{l.current&&(l.current.style.width=c+"px")},table:()=>l.current}));const g=c=>{if(o.current){o.current=!1;return}if(!t.current)return;const d=t.current.scrollLeft,i=e.scrollableDataElement();i&&i.scrollLeft!==d&&(i.scrollLeft=d)},u=r.useUnstyled(),s=u&&u.uGrid?u.uGrid:r.uGrid,{size:R="md"}=e;return e.staticHeaders?a.createElement("div",{ref:e.elemRef,className:r.classNames(s.header({draggable:e.draggable}),e.className),role:"presentation"},a.createElement("div",{ref:t,className:r.classNames(s.headerWrap({})),onScroll:g,role:"presentation"},a.createElement("table",{ref:l,className:r.classNames(s.headerTable({size:R}),e.className),role:"presentation"},a.createElement("colgroup",{ref:c=>{e.columnResize.colGroupHeader=c}},e.cols),a.createElement("thead",{className:r.classNames(s.tableThead({})),role:"rowgroup",...f.tableKeyboardNavigationHeaderAttributes},e.headerRow,e.filterRow)))):a.createElement("thead",{role:"presentation",className:r.classNames(s.thead({draggable:e.draggable}),e.className),...f.tableKeyboardNavigationHeaderAttributes},e.headerRow,e.filterRow)});m.displayName="KendoReactHeader";exports.Header=m;
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),n=require("@progress/kendo-react-common"),m=require("@progress/kendo-react-data-tools"),y=require("../GridClientWrapper.js");function v(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const s=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,s.get?s:{enumerable:!0,get:()=>e[a]})}}return r.default=e,Object.freeze(r)}const t=v(h),R=e=>{const r=t.useRef(null),a=t.useRef(null),s=t.useRef(!1),l=t.useContext(y.GridContext),b=n.useRtl(l.headerElementRef);l.columnResizeRef.current&&l.columnResizeRef.current.setIsRtl(b==="rtl"),t.useImperativeHandle(l.headerRef,()=>({setScrollLeft:c=>{r.current&&r.current.scrollLeft!==c&&(s.current=!0,r.current.scrollLeft=c)},setWidth:c=>{a.current&&(a.current.style.width=c+"px")},table:()=>a.current}));const g=c=>{var f;if(s.current){s.current=!1;return}if(!r.current)return;const d=r.current.scrollLeft,i=((f=l.vsRef.current)==null?void 0:f.container)||null;i&&i.scrollLeft!==d&&(i.scrollLeft=d)},u=n.useUnstyled(),o=u&&u.uGrid?u.uGrid:n.uGrid,{size:N="md"}=e;return e.staticHeaders?t.createElement("div",{ref:l.headerElementRef,className:n.classNames(o.header({draggable:e.draggable}),e.className),role:"presentation"},t.createElement("div",{ref:r,className:n.classNames(o.headerWrap({})),onScroll:g,role:"presentation"},t.createElement("table",{ref:a,className:n.classNames(o.headerTable({size:N}),e.className),role:"presentation"},t.createElement("colgroup",{ref:c=>{l.columnResizeRef.current&&(l.columnResizeRef.current.colGroupHeader=c)}},e.cols),t.createElement("thead",{className:n.classNames(o.tableThead({})),role:"rowgroup",...m.tableKeyboardNavigationHeaderAttributes},e.headerRow,e.filterRow)))):t.createElement("thead",{role:"presentation",className:n.classNames(o.thead({draggable:e.draggable}),e.className),...m.tableKeyboardNavigationHeaderAttributes},e.headerRow,e.filterRow)};R.displayName="KendoReactHeader";exports.Header=R;

package/header/Header.mjs

@@ -7,56 +7,58 @@
  */
 "use client";
 import * as t from "react";
-import { useRtl as g, useUnstyled as h, uGrid as N, classNames as c } from "@progress/kendo-react-common";
-import { tableKeyboardNavigationHeaderAttributes as u } from "@progress/kendo-react-data-tools";
-const E = t.forwardRef((e, f) => {
-  const a = t.useRef(null), n = t.useRef(null), s = t.useRef(!1), m = g(e.elemRef);
-  e.columnResize && e.columnResize.setIsRtl(m === "rtl"), t.useImperativeHandle(f, () => ({
-    setScrollLeft: (r) => {
-      a.current && a.current.scrollLeft !== r && (s.current = !0, a.current.scrollLeft = r);
+import { useRtl as g, useUnstyled as N, uGrid as E, classNames as c } from "@progress/kendo-react-common";
+import { tableKeyboardNavigationHeaderAttributes as m } from "@progress/kendo-react-data-tools";
+import { GridContext as v } from "../GridClientWrapper.mjs";
+const w = (e) => {
+  const l = t.useRef(null), s = t.useRef(null), o = t.useRef(!1), r = t.useContext(v), R = g(r.headerElementRef);
+  r.columnResizeRef.current && r.columnResizeRef.current.setIsRtl(R === "rtl"), t.useImperativeHandle(r.headerRef, () => ({
+    setScrollLeft: (a) => {
+      l.current && l.current.scrollLeft !== a && (o.current = !0, l.current.scrollLeft = a);
     },
-    setWidth: (r) => {
-      n.current && (n.current.style.width = r + "px");
+    setWidth: (a) => {
+      s.current && (s.current.style.width = a + "px");
     },
-    table: () => n.current
+    table: () => s.current
   }));
-  const R = (r) => {
-    if (s.current) {
-      s.current = !1;
+  const h = (a) => {
+    var f;
+    if (o.current) {
+      o.current = !1;
       return;
     }
-    if (!a.current)
+    if (!l.current)
       return;
-    const i = a.current.scrollLeft, d = e.scrollableDataElement();
-    d && d.scrollLeft !== i && (d.scrollLeft = i);
-  }, o = h(), l = o && o.uGrid ? o.uGrid : N, { size: b = "md" } = e;
+    const d = l.current.scrollLeft, i = ((f = r.vsRef.current) == null ? void 0 : f.container) || null;
+    i && i.scrollLeft !== d && (i.scrollLeft = d);
+  }, u = N(), n = u && u.uGrid ? u.uGrid : E, { size: b = "md" } = e;
   return e.staticHeaders ? /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: e.elemRef,
-      className: c(l.header({ draggable: e.draggable }), e.className),
+      ref: r.headerElementRef,
+      className: c(n.header({ draggable: e.draggable }), e.className),
       role: "presentation"
     },
     /* @__PURE__ */ t.createElement(
       "div",
       {
-        ref: a,
-        className: c(l.headerWrap({})),
-        onScroll: R,
+        ref: l,
+        className: c(n.headerWrap({})),
+        onScroll: h,
         role: "presentation"
       },
       /* @__PURE__ */ t.createElement(
         "table",
         {
-          ref: n,
-          className: c(l.headerTable({ size: b }), e.className),
+          ref: s,
+          className: c(n.headerTable({ size: b }), e.className),
           role: "presentation"
         },
         /* @__PURE__ */ t.createElement(
           "colgroup",
           {
-            ref: (r) => {
-              e.columnResize.colGroupHeader = r;
+            ref: (a) => {
+              r.columnResizeRef.current && (r.columnResizeRef.current.colGroupHeader = a);
             }
           },
           e.cols
@@ -64,9 +66,9 @@ const E = t.forwardRef((e, f) => {
         /* @__PURE__ */ t.createElement(
           "thead",
           {
-            className: c(l.tableThead({})),
+            className: c(n.tableThead({})),
             role: "rowgroup",
-            ...u
+            ...m
           },
           e.headerRow,
           e.filterRow
@@ -77,14 +79,14 @@ const E = t.forwardRef((e, f) => {
     "thead",
     {
       role: "presentation",
-      className: c(l.thead({ draggable: e.draggable }), e.className),
-      ...u
+      className: c(n.thead({ draggable: e.draggable }), e.className),
+      ...m
     },
     e.headerRow,
     e.filterRow
   );
-});
-E.displayName = "KendoReactHeader";
+};
+w.displayName = "KendoReactHeader";
 export {
-  E as Header
+  w as Header
 };

package/header/HeaderRow.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 T=require("react"),F=require("../interfaces/GridSortSettings.js"),_=require("../drag/ColumnDraggable.js"),U=require("./GridHeaderCell.js"),r=require("@progress/kendo-react-common"),N=require("@progress/kendo-react-data-tools"),V=require("@progress/kendo-react-intl"),D=require("../messages/index.js"),E=require("@progress/kendo-svg-icons"),W=require("../utils/index.js");function $(e){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const g=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(m,i,g.get?g:{enumerable:!0,get:()=>e[i]})}}return m.default=e,Object.freeze(m)}const o=$(T),B={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},J={none:"none",asc:"ascending",desc:"descending"},Q=e=>{const[m,i]=o.useState(),g=V.useLocalization(),h=r.useUnstyled(),C=h&&h.uGrid?h.uGrid:r.uGrid,b=o.useRef(null);let q=0,v=-1;const I=(l,n)=>{if(l.preventDefault(),!e.sortChange)return;const{allowUnsort:t,mode:d}=F.normalize(e.sortable||!1,n.sortable||!1),s=(e.sort||[]).filter(c=>c.field===n.field)[0],f=B[t][s&&s.dir||""],u=d==="single"?[]:(e.sort||[]).filter(c=>c.field!==n.field);f!==""&&n.field&&u.push({field:n.field,dir:f}),e.sortChange(u,l)},x=(l,n)=>{if(l.isDefaultPrevented())return;const{keyCode:t,metaKey:d,ctrlKey:s,altKey:f}=l,u=e.sortable&&n.sortable,c=l.target;if(u&&l.keyCode===r.Keys.enter&&c.className.indexOf("k-table-th")!==-1&&I(l,n),e.navigatable){if(e.groupable&&(d&&t===r.Keys.enter||s&&t===r.Keys.space)){l.preventDefault();const y=e.columns.findIndex(k=>k.field===n.field);e.columnGroupChange&&e.columnGroupChange(y,l)}f&&t===r.Keys.down&&(l.preventDefault(),i(n.field),b.current=c)}},O=()=>{i(void 0),b.current&&b.current.getAttribute("tabindex")!=="-1"&&b.current.focus()},G=l=>{if(!e.sort)return null;const n=r.classNames(C.sortIcon({}));return l>=0&&[o.createElement("span",{key:1,className:n},o.createElement(r.IconWrap,{name:"sort-"+e.sort[l].dir+"-small",icon:e.sort[l].dir==="asc"?E.sortAscSmallIcon:E.sortDescSmallIcon})),e.sort.length>1&&o.createElement("span",{key:2,className:n},o.createElement("span",{className:r.classNames(C.sortOrder({}))},l+1))]},M=l=>l.map(n=>{const t=e.columns[n],d=e.sortable&&t.sortable,s=e.sort?e.sort.findIndex(a=>a.field===t.field):-1,f=s>=0&&e.sort[s].dir||"none",u=t.columnMenu===null?null:t.columnMenu||e.columnMenu,c=t.menuIcon||e.columnMenuIcon,y=r.classNames(r.classNames(C.headerTh({first:t.kFirst,filterable:!!u,locked:t.locked,sorted:e.sort&&e.sort.some(a=>a.field===t.field)})),t.headerClassName);t.locked===!1&&(t.left=0);const k=t.left!==void 0?e.isRtl?{left:t.right,right:t.left}:{left:t.left,right:t.right}:{},K=g.toLanguageString(D.sortAriaLabel,D.messages[D.sortAriaLabel]),A=t.isAccessible?{ariaSort:J[f],role:"columnheader",ariaColumnIndex:t.ariaColumnIndex,ariaSelected:!1,ariaDescription:d?K:""}:{role:"presentation"},R=t.declarationIndex>=0?++v:--q,P=t.headerCell?t.headerCell:U.GridHeaderCell,w=o.createElement(P,{key:1,field:t.field,onClick:d&&(a=>I(a,t))||void 0,selectionChange:e.selectionChange,title:t.title,selectionValue:t.headerSelectionValue,render:e.cellRender,children:G(s),columnMenuWrapperProps:{column:{field:t.field,title:t.title,locked:t.locked,filter:t.filter,id:t.id},sortable:d&&e.sortable,sort:e.sort,onSortChange:e.sortChange,filter:e.filter,filterable:e.filterable&&t.filterable,filterOperators:e.filterOperators,onFilterChange:e.filterChange,show:m===t.field?!0:void 0,onCloseMenu:O,navigatable:e.navigatable,group:e.group,groupable:e.groupable,onGroupChange:e.groupChange,columnMenu:u,columnMenuIcon:c}}),H={...A,key:R,colSpan:t.colSpan,rowSpan:t.rowSpan,className:y,style:k,columnId:t.id,navigatable:t.navigatable,onKeyDown:a=>x(a,t),role:"columnheader"},z=[w,e.columnResize&&e.columnResize.resizable&&t.resizable&&o.createElement(N.ColumnResizer,{key:2,resize:(a,j,L)=>e.columnResize&&e.columnResize.dragHandler(a,t,j,L),autofit:a=>e.columnResize&&e.columnResize.dblClickHandler(a,[t.id])})],S=W.resolveCells(e.cells,t.cells);if(S&&S.headerCell){const a=S.headerCell;return o.createElement(a,{...w.props,key:R,thProps:H,index:n},z)}return o.createElement(N.HeaderThElement,{...H,key:R},z)});return e.columnsMap.map((l,n)=>e.pressHandler&&o.createElement(_.ColumnDraggable,{key:n,pressHandler:e.pressHandler,dragHandler:e.dragHandler,releaseHandler:e.releaseHandler,ariaRowIndex:n+1,dragClue:e.dragClue,headerRef:e.headerRef,containerRef:e.containerRef},M(l))||o.createElement("tr",{key:n,className:r.classNames(C.simpletr({})),role:"row","aria-rowindex":n+1},M(l)))};exports.HeaderRow=Q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),A=require("./GridHeaderCell.js"),c=require("@progress/kendo-react-common"),z=require("@progress/kendo-react-data-tools"),g=require("../messages/index.js"),y=require("@progress/kendo-svg-icons"),i=require("../utils/index.js"),M=require("./client/GridHeaderCellContainer.js"),L=require("./client/HeaderRowDraggable.js"),W=require("./client/GridHeaderRowContainer.js"),V=require("./client/GridHeaderCellElementContainer.js"),_=require("./client/HeaderCellResizer.js");function $(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const d=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,d.get?d:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const t=$(j),B={none:"none",asc:"ascending",desc:"descending"},F=e=>{const o=e.unstyled,n=o&&o.uGrid?o.uGrid:c.uGrid;let d=0,q=-1;const G=r=>{if(!e.sort)return null;const a=c.classNames(n.sortIcon({}));return r>=0&&[t.createElement("span",{key:1,className:a},t.createElement(c.IconWrap,{name:"sort-"+e.sort[r].dir+"-small",icon:e.sort[r].dir==="asc"?y.sortAscSmallIcon:y.sortDescSmallIcon})),e.sort.length>1&&t.createElement("span",{key:2,className:a},t.createElement("span",{className:c.classNames(n.sortOrder({}))},r+1))]},N=r=>r.map(a=>{var I;const l=e.columns[a],h=e.sortable&&l.sortable,u=e.sort?e.sort.findIndex(s=>s.field===l.field):-1,w=u>=0&&e.sort[u].dir||"none",H=l.columnMenu===null?null:l.columnMenu||e.columnMenu,P=l.menuIcon||e.columnMenuIcon,O=c.classNames(c.classNames(n.headerTh({first:l.kFirst,filterable:!!H,locked:l.locked,sorted:e.sort&&e.sort.some(s=>s.field===l.field)})),l.headerClassName);l.locked===!1&&(l.left=0);const D=e.localization.toLanguageString(g.sortAriaLabel,g.messages[g.sortAriaLabel]),x=l.isAccessible?{ariaSort:B[w],role:"columnheader",ariaColumnIndex:l.ariaColumnIndex,ariaSelected:!1,ariaDescription:h?D:""}:{role:"presentation"},S=l.declarationIndex>=0?++q:--d,m={field:l.field,title:l.title,selectionValue:(I=l.headerSelectionValue)!=null?I:e.headerSelectionValue,children:G(u),selectionChange:null,columnMenuWrapperProps:{column:{field:l.field,title:l.title,locked:l.locked,filter:l.filter,id:l.id},sortable:h&&e.sortable,sort:e.sort,filter:e.filter,filterable:e.filterable&&l.filterable,filterOperators:e.filterOperators,navigatable:e.navigatable,group:e.group,groupable:e.groupable,columnMenu:H,columnMenuIcon:P}},C={...x,colSpan:l.headerColSpan,rowSpan:l.rowSpan,className:O,columnId:l.id,navigatable:l.navigatable,role:"columnheader"},f=i.clientColumn(l),k={column:f,render:e.cellRender,sortable:e.sortable,sort:e.sort,columnMenuWrapperProps:m.columnMenuWrapperProps},E=l.headerCell?l.headerCell:A.GridHeaderCell,R=[t.createElement(M.GridHeaderCellContainer,{key:1,...k,isClient:i.isClientReference(E)},t.createElement(E,{...m})),t.createElement(_.HeaderCellResizer,{key:2,column:f})],b=i.resolveCells(e.cells,l.cells);if(b&&b.headerCell){const s=b.headerCell,T=i.isClientReference(s);return t.createElement(M.GridHeaderCellContainer,{key:S,...k,thProps:C,isCustom:!0,isClient:T},t.createElement(s,{...m,thProps:C,index:a},R))}return t.createElement(V.GridHeaderCellElementContainer,{key:S,column:f},t.createElement(z.HeaderThElement,{...C},R))}),v=e.columns.map(i.clientColumn);return t.createElement(W.GridHeaderRowContainer,{sortable:e.sortable,sort:e.sort,navigatable:e.navigatable,groupable:e.groupable,columns:v},e.columnsMap.map((r,a)=>t.createElement(L.HeaderRowDraggable,{key:a,className:c.classNames(n.simpleTr({})),ariaRowIndex:a+1},N(r))))};exports.HeaderRow=F;