@progress/kendo-react-grid 9.0.0-develop.2 → 9.0.0-develop.21

package/header/FilterRow.mjs

@@ -6,91 +6,78 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as a from "react";
-import { provideLocalizationService as k, registerForLocalization as u } from "@progress/kendo-react-intl";
-import { GridFilterCell as I } from "../cells/GridFilterCell.mjs";
-import { getFilterType as y, operatorMap as F, booleanFilterValues as L } from "../filterCommon.mjs";
-import { tableKeyboardNavigationTools as R, HeaderThElement as w } from "@progress/kendo-react-data-tools";
-import { filterAriaLabel as b, messages as N } from "../messages/index.mjs";
-import { classNames as T } from "@progress/kendo-react-common";
-import { resolveCells as z } from "../utils/index.mjs";
-const A = "k-table-row k-filter-row";
-class S extends a.Component {
-  headerCellClassName(r, o) {
-    let l = `${o ? "k-grid-header-sticky" : ""}`;
-    return this.props.sort && this.props.sort.filter((n) => n.field === r).length > 0 && (l += " k-sorted"), l;
-  }
-  setFilter(r, o, l, n) {
-    if (!this.props.filterChange)
+import * as f from "react";
+import { useLocalization as y } from "@progress/kendo-react-intl";
+import { GridFilterCell as R } from "../cells/GridFilterCell.mjs";
+import { getFilterType as w, operatorMap as b, booleanFilterValues as T } from "../filterCommon.mjs";
+import { tableKeyboardNavigationTools as N, HeaderThElement as z } from "@progress/kendo-react-data-tools";
+import { filterAriaLabel as F, messages as A } from "../messages/index.mjs";
+import { classNames as S } from "@progress/kendo-react-common";
+import { resolveCells as O } from "../utils/index.mjs";
+const P = "k-table-row k-filter-row", $ = (t) => {
+  const c = y(), u = (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 s = [];
-    (r !== "" && r !== null || o !== "") && s.push({
+    const i = [];
+    (e !== "" && e !== null || r !== "") && i.push({
       field: l,
-      operator: o,
-      value: r
-    }), this.props.filter && this.props.filter.filters && (this.props.filter.filters || []).forEach((i) => {
-      const t = i;
-      t && t.field !== l && s.push(t);
+      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 h = this.props.filter && this.props.filter.logic ? this.props.filter.logic : "and";
-    this.props.filterChange(s.length > 0 ? { logic: h, filters: s } : null, n);
-  }
-  render() {
-    const r = k(this), o = this.props.filter && this.props.filter.filters || [], l = (e) => {
-      if (e === void 0)
-        return;
-      const i = o.filter((t) => t.field === e);
-      return i.length ? i[0] : void 0;
-    };
-    let n = 0, s = -1;
-    const h = this.props.columns.filter((e) => e.children.length === 0).map(
-      (e) => {
-        const i = y(e.filter), t = l(e.field), g = e.filterable ? r.toLanguageString(b, N[b]) : void 0;
-        let d = t && t.value;
-        d === void 0 && (d = i === "text" ? "" : null);
-        const f = e.filterable && {
-          render: this.props.cellRender,
-          field: e.field,
-          title: e.filterTitle,
-          value: d,
-          operator: t && t.operator,
-          operators: F(this.props.filterOperators[i] || [], r),
-          booleanValues: F(L, r),
-          filterType: i,
-          ariaLabel: g,
-          onChange: (p) => {
-            this.setFilter(p.value, p.operator, e.field, p.syntheticEvent);
-          }
-        }, C = e.declarationIndex >= 0 ? ++s : --n, x = {
-          ariaLabel: g,
-          ariaColumnIndex: e.ariaColumnIndex
-        }, E = e.left !== void 0 ? this.props.isRtl ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {}, m = {
-          columnId: R.getFilterColumnId(e.id),
-          navigatable: e.navigatable || this.props.navigatable,
-          style: E,
-          className: T("k-table-th", this.headerCellClassName(e.field, e.locked) || void 0),
-          role: "columnheader",
-          ...x
-        }, v = f && (e.filterCell ? /* @__PURE__ */ a.createElement(e.filterCell, { ...f }) : /* @__PURE__ */ a.createElement(I, { size: this.props.size, ...f })), c = z(this.props.cells, e.cells);
-        if (c && c.filterCell) {
-          const p = c.filterCell;
-          return /* @__PURE__ */ a.createElement(p, { key: C, ...f, thProps: m, index: s }, v);
-        }
-        return /* @__PURE__ */ a.createElement(
-          w,
-          {
-            key: C,
-            ...m
-          },
-          v
-        );
-      }
+    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) => {
+    if (e === void 0)
+      return;
+    const r = E.filter(
+      (l) => l.field === e
     );
-    return /* @__PURE__ */ a.createElement("tr", { className: A, "aria-rowindex": this.props.ariaRowIndex, role: "row" }, h);
-  }
-}
-u(S);
+    return r.length ? r[0] : void 0;
+  };
+  let I = 0, C = -1;
+  const L = t.columns.filter((e) => e.children.length === 0).map((e) => {
+    const r = w(e.filter), l = k(e.field), a = e.filterable ? c.toLanguageString(F, A[F]) : void 0;
+    let i = l && l.value;
+    i === void 0 && (i = r === "text" ? "" : null);
+    const o = e.filterable && {
+      render: t.cellRender,
+      field: e.field,
+      title: e.filterTitle,
+      value: i,
+      operator: l && l.operator,
+      operators: b(t.filterOperators[r] || [], c),
+      booleanValues: b(T, c),
+      filterType: r,
+      ariaLabel: a,
+      onChange: (s) => {
+        x(s.value, s.operator, e.field, s.syntheticEvent);
+      }
+    }, d = e.declarationIndex >= 0 ? ++C : --I, g = {
+      ariaLabel: a,
+      ariaColumnIndex: e.ariaColumnIndex
+    }, n = e.left !== void 0 ? t.isRtl ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {}, m = {
+      columnId: N.getFilterColumnId(e.id),
+      navigatable: e.navigatable || t.navigatable,
+      style: n,
+      className: S("k-table-th", u(e.field, e.locked) || void 0),
+      role: "columnheader",
+      ...g
+    }, v = o && (e.filterCell ? /* @__PURE__ */ f.createElement(e.filterCell, { ...o }) : /* @__PURE__ */ f.createElement(R, { size: t.size, ...o })), h = O(t.cells, e.cells);
+    if (h && h.filterCell) {
+      const s = h.filterCell;
+      return /* @__PURE__ */ f.createElement(s, { key: d, ...o, thProps: m, index: C }, v);
+    }
+    return /* @__PURE__ */ f.createElement(z, { key: d, ...m }, v);
+  });
+  return /* @__PURE__ */ f.createElement("tr", { className: P, "aria-rowindex": t.ariaRowIndex, role: "row" }, L);
+};
 export {
-  A as FILTER_ROW_CLASS,
-  S as FilterRow
+  P as FILTER_ROW_CLASS,
+  $ as FilterRow
 };

package/header/GridHeaderSelectionCell.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 d=require("react"),p=require("../columnMenu/GridColumnMenuWrapper.js"),i=require("../messages/index.js"),s=require("@progress/kendo-react-intl"),c=require("@progress/kendo-react-common");function u(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const n=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(r,e,n.get?n:{enumerable:!0,get:()=>t[e]})}}return r.default=t,Object.freeze(r)}const o=u(d);class a extends o.Component{get _inputId(){return this.props.id}render(){const r=s.provideLocalizationService(this),{columnMenuWrapperProps:e}=this.props,n=[o.createElement("span",{key:0,className:"k-checkbox-wrap"},o.createElement("input",{id:this._inputId,type:"checkbox",tabIndex:-1,className:"k-checkbox k-checkbox-md k-rounded-md","aria-label":r.toLanguageString(i.selectRow,i.messages[i.selectRow]),"aria-checked":this.props.selectionValue,checked:this.props.selectionValue,onChange:l=>this.props.selectionChange({field:this.props.field,syntheticEvent:l})})),e.columnMenu&&o.createElement(p.GridColumnMenuWrapper,{...e})];return this.props.render?this.props.render.call(void 0,n,this.props):n}}s.registerForLocalization(a);const h=c.withIdHOC(c.withUnstyledHOC(a));exports.GridHeaderSelectionCell=h;
+"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;

package/header/GridHeaderSelectionCell.mjs

@@ -6,40 +6,33 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as e from "react";
-import { GridColumnMenuWrapper as c } from "../columnMenu/GridColumnMenuWrapper.mjs";
-import { selectRow as o, messages as a } from "../messages/index.mjs";
-import { registerForLocalization as p, provideLocalizationService as l } from "@progress/kendo-react-intl";
-import { withIdHOC as d, withUnstyledHOC as h } from "@progress/kendo-react-common";
-class i extends e.Component {
-  get _inputId() {
-    return this.props.id;
-  }
-  render() {
-    const n = l(this), { columnMenuWrapperProps: t } = this.props, r = [
-      /* @__PURE__ */ e.createElement("span", { key: 0, className: "k-checkbox-wrap" }, /* @__PURE__ */ e.createElement(
-        "input",
-        {
-          id: this._inputId,
-          type: "checkbox",
-          tabIndex: -1,
-          className: "k-checkbox k-checkbox-md k-rounded-md",
-          "aria-label": n.toLanguageString(o, a[o]),
-          "aria-checked": this.props.selectionValue,
-          checked: this.props.selectionValue,
-          onChange: (s) => this.props.selectionChange({
-            field: this.props.field,
-            syntheticEvent: s
-          })
-        }
-      )),
-      t.columnMenu && /* @__PURE__ */ e.createElement(c, { ...t })
-    ];
-    return this.props.render ? this.props.render.call(void 0, r, this.props) : r;
-  }
-}
-p(i);
-const C = d(h(i));
+import * as n from "react";
+import { GridColumnMenuWrapper as d } from "../columnMenu/GridColumnMenuWrapper.mjs";
+import { selectRow as a, 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";
+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(
+      "input",
+      {
+        id: i,
+        type: "checkbox",
+        tabIndex: -1,
+        className: "k-checkbox k-checkbox-md k-rounded-md",
+        "aria-label": o.toLanguageString(a, m[a]),
+        "aria-checked": e.selectionValue,
+        checked: e.selectionValue,
+        onChange: (r) => e.selectionChange({
+          field: e.field,
+          syntheticEvent: r
+        })
+      }
+    )),
+    t.columnMenu && /* @__PURE__ */ n.createElement(d, { ...t })
+  ];
+  return e.render ? e.render.call(void 0, c, e) : c;
+};
 export {
-  C as GridHeaderSelectionCell
+  b as GridHeaderSelectionCell
 };

package/header/GroupPanel.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 u=require("react"),g=require("../drag/GroupingIndicator.js"),l=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function h(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,r.get?r:{enumerable:!0,get:()=>t[e]})}}return o.default=t,Object.freeze(o)}const i=h(u);class c extends i.Component{constructor(){super(...arguments),this.onGroupRemove=(o,e)=>{const r=this.props.group.slice();r.splice(e,1),this.props.groupChange(r,o)},this.onGroupSortChange=(o,e,r,n)=>{const a=Object.assign({},r,{dir:n}),p=this.props.group.slice();p.splice(e,1,a),this.props.groupChange(p,o)}}render(){const e=(this.props.group||[]).map((r,n)=>i.createElement(g.GroupingIndicator,{key:n,index:n,dir:r.dir||"asc",title:this.props.resolveTitle(r.field),onRemove:a=>{this.onGroupRemove(a,n)},onSortChange:(a,p)=>{this.onGroupSortChange(a,n,r,p)},onPress:this.props.pressHandler,onDrag:this.props.dragHandler,onRelease:this.props.releaseHandler,onContextMenu:this.props.onContextMenu}));return i.createElement("div",{ref:this.props.refCallback,className:"k-grouping-header",role:"toolbar","aria-label":l.provideLocalizationService(this).toLanguageString(s.groupPanelAriaLabel,s.messages[s.groupPanelAriaLabel]),"aria-controls":this.props.ariaControls||""},i.createElement("div",{className:"k-chip-list k-chip-list-md",role:"none"},e),i.createElement("div",{className:"k-grouping-drop-container"},!e.length&&l.provideLocalizationService(this).toLanguageString(s.groupPanelEmpty,s.messages[s.groupPanelEmpty])," "))}}l.registerForLocalization(c);exports.GroupPanel=c;
+"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;

package/header/GroupPanel.mjs

@@ -6,55 +6,49 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as t from "react";
-import { GroupingIndicator as c } from "../drag/GroupingIndicator.mjs";
-import { provideLocalizationService as a, registerForLocalization as u } from "@progress/kendo-react-intl";
-import { groupPanelAriaLabel as i, messages as l, groupPanelEmpty as g } from "../messages/index.mjs";
-class h extends t.Component {
-  constructor() {
-    super(...arguments), this.onGroupRemove = (p, r) => {
-      const o = this.props.group.slice();
-      o.splice(r, 1), this.props.groupChange(o, p);
-    }, this.onGroupSortChange = (p, r, o, e) => {
-      const s = Object.assign({}, o, { dir: e }), n = this.props.group.slice();
-      n.splice(r, 1, s), this.props.groupChange(n, p);
-    };
-  }
-  render() {
-    const r = (this.props.group || []).map((o, e) => /* @__PURE__ */ t.createElement(
-      c,
-      {
-        key: e,
-        index: e,
-        dir: o.dir || "asc",
-        title: this.props.resolveTitle(o.field),
-        onRemove: (s) => {
-          this.onGroupRemove(s, e);
-        },
-        onSortChange: (s, n) => {
-          this.onGroupSortChange(s, e, o, n);
-        },
-        onPress: this.props.pressHandler,
-        onDrag: this.props.dragHandler,
-        onRelease: this.props.releaseHandler,
-        onContextMenu: this.props.onContextMenu
-      }
-    ));
-    return /* @__PURE__ */ t.createElement(
-      "div",
-      {
-        ref: this.props.refCallback,
-        className: "k-grouping-header",
-        role: "toolbar",
-        "aria-label": a(this).toLanguageString(i, l[i]),
-        "aria-controls": this.props.ariaControls || ""
+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,
+    {
+      key: o,
+      index: o,
+      dir: a.dir || "asc",
+      title: e.resolveTitle(a.field),
+      onRemove: (n) => {
+        m(n, o);
       },
-      /* @__PURE__ */ t.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, r),
-      /* @__PURE__ */ t.createElement("div", { className: "k-grouping-drop-container" }, !r.length && a(this).toLanguageString(g, l[g]), " ")
-    );
-  }
-}
-u(h);
+      onSortChange: (n, t) => {
+        d(n, o, a, t);
+      },
+      onPress: e.pressHandler,
+      onDrag: e.dragHandler,
+      onRelease: e.releaseHandler,
+      onContextMenu: e.onContextMenu
+    }
+  ));
+  return /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      ref: e.refCallback,
+      className: "k-grouping-header",
+      role: "toolbar",
+      "aria-label": l.toLanguageString(c, g[c]),
+      "aria-controls": e.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]), " ")
+  );
+};
 export {
-  h as GroupPanel
+  P as GroupPanel
 };

package/header/Header.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 i=require("react"),r=require("@progress/kendo-react-common"),o=require("@progress/kendo-react-data-tools");function c(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const s in l)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(l,s);Object.defineProperty(e,s,t.get?t:{enumerable:!0,get:()=>l[s]})}}return e.default=l,Object.freeze(e)}const a=c(i);class n extends a.Component{constructor(){super(...arguments),this.headerWrap=null,this.table=null,this.syncScroll=!1,this.scrollbarWidth=r.getScrollbarWidth(),this.onScroll=e=>{if(this.syncScroll){this.syncScroll=!1;return}if(!this.headerWrap)return;const s=this.headerWrap.scrollLeft,t=this.props.scrollableDataElement();t&&t.scrollLeft!==s&&(t.scrollLeft=s)}}get element(){return this.props.elemRef.current}componentDidMount(){const e=o.isRtl(this.element);this.props.columnResize&&this.props.columnResize.setIsRtl(e),this.forceUpdate()}setScrollLeft(e){this.headerWrap&&this.headerWrap.scrollLeft!==e&&(this.syncScroll=!0,this.headerWrap.scrollLeft=e)}setWidth(e){this.table&&(this.table.style.width=e+"px")}render(){const e=this.context&&this.context.uGrid?this.context.uGrid:r.uGrid,{size:s="md"}=this.props;return this.props.staticHeaders?a.createElement("div",{ref:this.props.elemRef,className:r.classNames(e.header({draggable:this.props.draggable}),this.props.className),role:"presentation"},a.createElement("div",{ref:t=>{this.headerWrap=t},className:r.classNames(e.headerWrap({})),style:this.props.hasScrollbarWidth?{}:{borderWidth:0},onScroll:this.onScroll,role:"presentation"},a.createElement("table",{ref:t=>{this.table=t},className:r.classNames(e.headerTable({size:s}),this.props.className),role:"presentation"},a.createElement("colgroup",{ref:t=>{this.props.columnResize.colGroupHeader=t}},this.props.cols),a.createElement("thead",{className:r.classNames(e.tableThead({})),role:"rowgroup",...o.tableKeyboardNavigationHeaderAttributes},this.props.headerRow,this.props.filterRow)))):a.createElement("thead",{role:"presentation",className:r.classNames(e.thead({draggable:this.props.draggable}),this.props.className),...o.tableKeyboardNavigationHeaderAttributes},this.props.headerRow,this.props.filterRow)}}exports.Header=n;
+"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({})),style:e.hasScrollbarWidth?{}:{borderWidth:0},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;

package/header/Header.mjs

@@ -6,90 +6,86 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as s from "react";
-import { getScrollbarWidth as o, uGrid as i, classNames as r } from "@progress/kendo-react-common";
-import { isRtl as h, tableKeyboardNavigationHeaderAttributes as a } from "@progress/kendo-react-data-tools";
-class d extends s.Component {
-  constructor() {
-    super(...arguments), this.headerWrap = null, this.table = null, this.syncScroll = !1, this.scrollbarWidth = o(), this.onScroll = (e) => {
-      if (this.syncScroll) {
-        this.syncScroll = !1;
-        return;
-      }
-      if (!this.headerWrap)
-        return;
-      const l = this.headerWrap.scrollLeft, t = this.props.scrollableDataElement();
-      t && t.scrollLeft !== l && (t.scrollLeft = l);
-    };
-  }
-  get element() {
-    return this.props.elemRef.current;
-  }
-  componentDidMount() {
-    const e = h(this.element);
-    this.props.columnResize && this.props.columnResize.setIsRtl(e), this.forceUpdate();
-  }
-  /**
-   *
-   * @param scrollLeft - Scrolls to the left (in pixels).
-   */
-  setScrollLeft(e) {
-    this.headerWrap && this.headerWrap.scrollLeft !== e && (this.syncScroll = !0, this.headerWrap.scrollLeft = e);
-  }
-  /**
-   *
-   * @param width - Scrolls the width (in pixels).
-   */
-  setWidth(e) {
-    this.table && (this.table.style.width = e + "px");
-  }
-  render() {
-    const e = this.context && this.context.uGrid ? this.context.uGrid : i, { size: l = "md" } = this.props;
-    return this.props.staticHeaders ? /* @__PURE__ */ s.createElement(
+import * as t from "react";
+import { useRtl as h, useUnstyled as g, 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 l = t.useRef(null), n = t.useRef(null), s = t.useRef(!1), m = h(e.elemRef);
+  e.columnResize && e.columnResize.setIsRtl(m === "rtl"), t.useImperativeHandle(f, () => ({
+    setScrollLeft: (r) => {
+      l.current && l.current.scrollLeft !== r && (s.current = !0, l.current.scrollLeft = r);
+    },
+    setWidth: (r) => {
+      n.current && (n.current.style.width = r + "px");
+    },
+    table: () => n.current
+  }));
+  const R = (r) => {
+    if (s.current) {
+      s.current = !1;
+      return;
+    }
+    if (!l.current)
+      return;
+    const i = l.current.scrollLeft, d = e.scrollableDataElement();
+    d && d.scrollLeft !== i && (d.scrollLeft = i);
+  }, o = g(), a = o && o.uGrid ? o.uGrid : N, { size: b = "md" } = e;
+  return e.staticHeaders ? /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      ref: e.elemRef,
+      className: c(a.header({ draggable: e.draggable }), e.className),
+      role: "presentation"
+    },
+    /* @__PURE__ */ t.createElement(
       "div",
       {
-        ref: this.props.elemRef,
-        className: r(e.header({ draggable: this.props.draggable }), this.props.className),
+        ref: l,
+        className: c(a.headerWrap({})),
+        style: e.hasScrollbarWidth ? {} : { borderWidth: 0 },
+        onScroll: R,
         role: "presentation"
       },
-      /* @__PURE__ */ s.createElement(
-        "div",
+      /* @__PURE__ */ t.createElement(
+        "table",
         {
-          ref: (t) => {
-            this.headerWrap = t;
-          },
-          className: r(e.headerWrap({})),
-          style: this.props.hasScrollbarWidth ? {} : { borderWidth: 0 },
-          onScroll: this.onScroll,
+          ref: n,
+          className: c(a.headerTable({ size: b }), e.className),
           role: "presentation"
         },
-        /* @__PURE__ */ s.createElement(
-          "table",
+        /* @__PURE__ */ t.createElement(
+          "colgroup",
+          {
+            ref: (r) => {
+              e.columnResize.colGroupHeader = r;
+            }
+          },
+          e.cols
+        ),
+        /* @__PURE__ */ t.createElement(
+          "thead",
           {
-            ref: (t) => {
-              this.table = t;
-            },
-            className: r(e.headerTable({ size: l }), this.props.className),
-            role: "presentation"
+            className: c(a.tableThead({})),
+            role: "rowgroup",
+            ...u
           },
-          /* @__PURE__ */ s.createElement("colgroup", { ref: (t) => {
-            this.props.columnResize.colGroupHeader = t;
-          } }, this.props.cols),
-          /* @__PURE__ */ s.createElement("thead", { className: r(e.tableThead({})), role: "rowgroup", ...a }, this.props.headerRow, this.props.filterRow)
+          e.headerRow,
+          e.filterRow
         )
       )
-    ) : /* @__PURE__ */ s.createElement(
-      "thead",
-      {
-        role: "presentation",
-        className: r(e.thead({ draggable: this.props.draggable }), this.props.className),
-        ...a
-      },
-      this.props.headerRow,
-      this.props.filterRow
-    );
-  }
-}
+    )
+  ) : /* @__PURE__ */ t.createElement(
+    "thead",
+    {
+      role: "presentation",
+      className: c(a.thead({ draggable: e.draggable }), e.className),
+      ...u
+    },
+    e.headerRow,
+    e.filterRow
+  );
+});
+E.displayName = "KendoReactHeader";
 export {
-  d as Header
+  E as Header
 };

package/header/HeaderRow.mjs

@@ -61,12 +61,14 @@ const $ = {
     ];
   }, I = (t) => t.map((n) => {
     const l = e.columns[n], s = e.sortable && l.sortable, o = e.sort ? e.sort.findIndex((a) => a.field === l.field) : -1, d = o >= 0 && e.sort[o].dir || "none", c = l.columnMenu === null ? null : l.columnMenu || e.columnMenu, i = l.menuIcon || e.columnMenuIcon, h = u(
-      u(f.headerTh({
-        first: l.kFirst,
-        filterable: !!c,
-        locked: l.locked,
-        sorted: e.sort && e.sort.some((a) => a.field === l.field)
-      })),
+      u(
+        f.headerTh({
+          first: l.kFirst,
+          filterable: !!c,
+          locked: l.locked,
+          sorted: e.sort && e.sort.some((a) => a.field === l.field)
+        })
+      ),
       l.headerClassName
     );
     l.locked === !1 && (l.left = 0);
@@ -140,29 +142,24 @@ const $ = {
       const a = y.headerCell;
       return /* @__PURE__ */ r.createElement(a, { ...M.props, key: k, thProps: w, index: n }, z);
     }
-    return /* @__PURE__ */ r.createElement(
-      J,
+    return /* @__PURE__ */ r.createElement(J, { ...w, key: k }, z);
+  });
+  return e.columnsMap.map(
+    (t, n) => e.pressHandler && /* @__PURE__ */ r.createElement(
+      U,
       {
-        ...w,
-        key: k
+        key: n,
+        pressHandler: e.pressHandler,
+        dragHandler: e.dragHandler,
+        releaseHandler: e.releaseHandler,
+        ariaRowIndex: n + 1,
+        dragClue: e.dragClue,
+        headerRef: e.headerRef,
+        containerRef: e.containerRef
       },
-      z
-    );
-  });
-  return e.columnsMap.map((t, n) => e.pressHandler && /* @__PURE__ */ r.createElement(
-    U,
-    {
-      key: n,
-      pressHandler: e.pressHandler,
-      dragHandler: e.dragHandler,
-      releaseHandler: e.releaseHandler,
-      ariaRowIndex: n + 1,
-      dragClue: e.dragClue,
-      headerRef: e.headerRef,
-      containerRef: e.containerRef
-    },
-    I(t)
-  ) || /* @__PURE__ */ r.createElement("tr", { key: n, className: u(f.simpletr({})), role: "row", "aria-rowindex": n + 1 }, I(t)));
+      I(t)
+    ) || /* @__PURE__ */ r.createElement("tr", { key: n, className: u(f.simpletr({})), role: "row", "aria-rowindex": n + 1 }, I(t))
+  );
 };
 export {
   ce as HeaderRow