@progress/kendo-react-grid 7.2.4-develop.3 → 7.3.0-develop.1

package/header/FilterRow.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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("react"),x=require("@progress/kendo-react-intl"),S=require("../cells/GridFilterCell.js"),d=require("../filterCommon.js"),k=require("@progress/kendo-react-data-tools"),C=require("../messages/index.js"),T=require("@progress/kendo-react-common"),O=require("../utils/index.js");function q(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:()=>a[r]})}}return t.default=a,Object.freeze(t)}const n=q(L),y="k-table-row k-filter-row";class m extends n.Component{headerCellClassName(t,r){let i=`${r?"k-grid-header-sticky":""}`;return this.props.sort&&this.props.sort.filter(c=>c.field===t).length>0&&(i+=" k-sorted"),i}setFilter(t,r,i,c){if(!this.props.filterChange)return;const o=[];(t!==""&&t!==null||r!=="")&&o.push({field:i,operator:r,value:t}),this.props.filter&&this.props.filter.filters&&(this.props.filter.filters||[]).forEach(s=>{const l=s;l&&l.field!==i&&o.push(l)});const h=this.props.filter&&this.props.filter.logic?this.props.filter.logic:"and";this.props.filterChange(o.length>0?{logic:h,filters:o}:null,c)}render(){const t=x.provideLocalizationService(this),r=this.props.filter&&this.props.filter.filters||[],i=e=>{if(e===void 0)return;const s=r.filter(l=>l.field===e);return s.length?s[0]:void 0};let c=0,o=-1;const h=this.props.columns.filter(e=>e.children.length===0).map(e=>{const s=d.getFilterType(e.filter),l=i(e.field),b=e.filterable?t.toLanguageString(C.filterAriaLabel,C.messages[C.filterAriaLabel]):void 0;let g=l&&l.value;g===void 0&&(g=s==="text"?"":null);const p=e.filterable&&{render:this.props.cellRender,field:e.field,title:e.filterTitle,value:g,operator:l&&l.operator,operators:d.operatorMap(this.props.filterOperators[s]||[],t),booleanValues:d.operatorMap(d.booleanFilterValues,t),filterType:s,ariaLabel:b,onChange:f=>{this.setFilter(f.value,f.operator,e.field,f.syntheticEvent)}},v=e.declarationIndex>=0?++o:--c,E={ariaLabel:b,ariaColumnIndex:e.ariaColumnIndex},I=e.left!==void 0?this.props.isRtl?{left:e.right,right:e.left}:{left:e.left,right:e.right}:{},F={columnId:k.tableKeyboardNavigationTools.getFilterColumnId(e.id),navigatable:e.navigatable,style:I,className:T.classNames("k-table-th",this.headerCellClassName(e.field,e.locked)||void 0),role:"columnheader",...E},R=p&&(e.filterCell?n.createElement(e.filterCell,{...p}):n.createElement(S.GridFilterCell,{size:this.props.size,...p})),u=O.resolveCells(this.props.cells,e.cells);if(u&&u.filterCell){const f=u.filterCell;return n.createElement(f,{key:v,...p,thProps:F,index:o},R)}return n.createElement(k.HeaderThElement,{key:v,...F},R)});return n.createElement("tr",{className:y,"aria-rowindex":this.props.ariaRowIndex,role:"row"},h)}}x.registerForLocalization(m);exports.FILTER_ROW_CLASS=y;exports.FilterRow=m;

package/header/FilterRow.mjs

@@ -0,0 +1,96 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"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)
+      return;
+    const s = [];
+    (r !== "" && r !== null || o !== "") && s.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);
+    });
+    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,
+          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
+        );
+      }
+    );
+    return /* @__PURE__ */ a.createElement("tr", { className: A, "aria-rowindex": this.props.ariaRowIndex, role: "row" }, h);
+  }
+}
+u(S);
+export {
+  A as FILTER_ROW_CLASS,
+  S as FilterRow
+};

package/header/GridHeaderCell.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 o=require("@progress/kendo-react-common"),l=require("react"),c=require("../columnMenu/GridColumnMenuWrapper.js");function a(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const s=a(l);class i extends s.Component{render(){const{columnMenuWrapperProps:r}=this.props,t=this.props.onClick?{onClick:this.props.onClick}:{},n=s.createElement("span",{className:"k-cell-inner"},s.createElement("span",{className:o.classNames("k-link",{"!k-cursor-default":!this.props.columnMenuWrapperProps.sortable}),...t},s.createElement("span",{className:"k-column-title"},this.props.title||this.props.field||" "),this.props.children),r.columnMenu&&s.createElement(c.GridColumnMenuWrapper,{...r}));return this.props.render?this.props.render.call(void 0,n,this.props):n}}exports.GridHeaderCell=i;

package/header/GridHeaderCell.mjs

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import { classNames as n } from "@progress/kendo-react-common";
+import * as e from "react";
+import { GridColumnMenuWrapper as p } from "../columnMenu/GridColumnMenuWrapper.mjs";
+class c extends e.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    const { columnMenuWrapperProps: r } = this.props, t = this.props.onClick ? {
+      onClick: this.props.onClick
+    } : {}, s = /* @__PURE__ */ e.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        className: n(
+          "k-link",
+          {
+            "!k-cursor-default": !this.props.columnMenuWrapperProps.sortable
+          }
+        ),
+        ...t
+      },
+      /* @__PURE__ */ e.createElement("span", { className: "k-column-title" }, this.props.title || this.props.field || " "),
+      this.props.children
+    ), r.columnMenu && /* @__PURE__ */ e.createElement(p, { ...r }));
+    return this.props.render ? this.props.render.call(void 0, s, this.props) : s;
+  }
+}
+export {
+  c as GridHeaderCell
+};

package/header/GridHeaderSelectionCell.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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("react"),p=require("../columnMenu/GridColumnMenuWrapper.js"),c=require("../messages/index.js"),i=require("@progress/kendo-react-intl"),d=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(l);class s extends o.Component{get _inputId(){return this.props.id}render(){const r=i.provideLocalizationService(this),{columnMenuWrapperProps:e}=this.props,n=[o.createElement("span",{key:0,className:"k-checkbox-wrap"},o.createElement("input",{id:this._inputId,type:"checkbox",className:"k-checkbox k-checkbox-md k-rounded-md","aria-label":r.toLanguageString(c.selectRow,c.messages[c.selectRow]),"aria-checked":this.props.selectionValue,checked:this.props.selectionValue,onChange:a=>this.props.selectionChange({field:this.props.field,syntheticEvent:a})})),e.columnMenu&&o.createElement(p.GridColumnMenuWrapper,{...e})];return this.props.render?this.props.render.call(void 0,n,this.props):n}}i.registerForLocalization(s);const h=d.withIdHOC(s);exports.GridHeaderSelectionCell=h;

package/header/GridHeaderSelectionCell.mjs

@@ -0,0 +1,44 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as e from "react";
+import { GridColumnMenuWrapper as c } from "../columnMenu/GridColumnMenuWrapper.mjs";
+import { selectRow as o, messages as p } from "../messages/index.mjs";
+import { registerForLocalization as a, provideLocalizationService as l } from "@progress/kendo-react-intl";
+import { withIdHOC as d } from "@progress/kendo-react-common";
+class i extends e.Component {
+  get _inputId() {
+    return this.props.id;
+  }
+  render() {
+    const n = l(this), { columnMenuWrapperProps: r } = this.props, t = [
+      /* @__PURE__ */ e.createElement("span", { key: 0, className: "k-checkbox-wrap" }, /* @__PURE__ */ e.createElement(
+        "input",
+        {
+          id: this._inputId,
+          type: "checkbox",
+          className: "k-checkbox k-checkbox-md k-rounded-md",
+          "aria-label": n.toLanguageString(o, p[o]),
+          "aria-checked": this.props.selectionValue,
+          checked: this.props.selectionValue,
+          onChange: (s) => this.props.selectionChange({
+            field: this.props.field,
+            syntheticEvent: s
+          })
+        }
+      )),
+      r.columnMenu && /* @__PURE__ */ e.createElement(c, { ...r })
+    ];
+    return this.props.render ? this.props.render.call(void 0, t, this.props) : t;
+  }
+}
+a(i);
+const g = d(i);
+export {
+  g as GridHeaderSelectionCell
+};

package/header/GroupPanel.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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;

package/header/GroupPanel.mjs

@@ -0,0 +1,60 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"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 || ""
+      },
+      /* @__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);
+export {
+  h as GroupPanel
+};

package/header/Header.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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"),l=require("@progress/kendo-react-common"),o=require("@progress/kendo-react-data-tools");function n(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const r=n(i);class c extends r.Component{constructor(){super(...arguments),this.headerWrap=null,this.table=null,this.syncScroll=!1,this.scrollbarWidth=l.getScrollbarWidth(),this.onScroll=e=>{if(this.syncScroll){this.syncScroll=!1;return}if(!this.headerWrap)return;const t=this.headerWrap.scrollLeft,a=this.props.scrollableDataElement();a&&a.scrollLeft!==t&&(a.scrollLeft=t)}}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(){return this.props.staticHeaders?r.createElement("div",{ref:this.props.elemRef,className:l.classNames("k-grid-header",{"k-grid-draggable-header":this.props.draggable}),role:"presentation"},r.createElement("div",{ref:e=>{this.headerWrap=e},className:"k-grid-header-wrap",style:this.scrollbarWidth?{}:{borderWidth:0},onScroll:this.onScroll,role:"presentation"},r.createElement("table",{ref:e=>{this.table=e},className:l.classNames("k-table k-grid-header-table",{"k-table-md":!this.props.size,[`k-table-${l.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size},this.props.className),role:"presentation"},r.createElement("colgroup",{ref:e=>{this.props.columnResize.colGroupHeader=e}},this.props.cols),r.createElement("thead",{className:"k-table-thead",role:"rowgroup",...o.tableKeyboardNavigationHeaderAttributes},this.props.headerRow,this.props.filterRow)))):r.createElement("thead",{role:"presentation",className:l.classNames("k-table-thead",{"k-grid-draggable-header":this.props.draggable}),...o.tableKeyboardNavigationHeaderAttributes},this.props.headerRow,this.props.filterRow)}}exports.Header=c;

package/header/Header.mjs

@@ -0,0 +1,107 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as t from "react";
+import { getScrollbarWidth as o, classNames as s, kendoThemeMaps as i } from "@progress/kendo-react-common";
+import { isRtl as h, tableKeyboardNavigationHeaderAttributes as a } from "@progress/kendo-react-data-tools";
+class d extends t.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, r = this.props.scrollableDataElement();
+      r && r.scrollLeft !== l && (r.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() {
+    return this.props.staticHeaders ? /* @__PURE__ */ t.createElement(
+      "div",
+      {
+        ref: this.props.elemRef,
+        className: s(
+          "k-grid-header",
+          { "k-grid-draggable-header": this.props.draggable }
+        ),
+        role: "presentation"
+      },
+      /* @__PURE__ */ t.createElement(
+        "div",
+        {
+          ref: (e) => {
+            this.headerWrap = e;
+          },
+          className: "k-grid-header-wrap",
+          style: this.scrollbarWidth ? {} : { borderWidth: 0 },
+          onScroll: this.onScroll,
+          role: "presentation"
+        },
+        /* @__PURE__ */ t.createElement(
+          "table",
+          {
+            ref: (e) => {
+              this.table = e;
+            },
+            className: s(
+              "k-table k-grid-header-table",
+              {
+                "k-table-md": !this.props.size,
+                [`k-table-${i.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+              },
+              this.props.className
+            ),
+            role: "presentation"
+          },
+          /* @__PURE__ */ t.createElement("colgroup", { ref: (e) => {
+            this.props.columnResize.colGroupHeader = e;
+          } }, this.props.cols),
+          /* @__PURE__ */ t.createElement("thead", { className: "k-table-thead", role: "rowgroup", ...a }, this.props.headerRow, this.props.filterRow)
+        )
+      )
+    ) : /* @__PURE__ */ t.createElement(
+      "thead",
+      {
+        role: "presentation",
+        className: s(
+          "k-table-thead",
+          { "k-grid-draggable-header": this.props.draggable }
+        ),
+        ...a
+      },
+      this.props.headerRow,
+      this.props.filterRow
+    );
+  }
+}
+export {
+  d as Header
+};

package/header/HeaderRow.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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"),q=require("../interfaces/GridSortSettings.js"),E=require("../drag/ColumnDraggable.js"),M=require("./GridHeaderCell.js"),u=require("@progress/kendo-react-common"),C=require("@progress/kendo-react-data-tools"),b=require("@progress/kendo-react-intl"),f=require("../messages/index.js"),k=require("@progress/kendo-svg-icons"),N=require("../utils/index.js");function O(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(s,r,l.get?l:{enumerable:!0,get:()=>n[r]})}}return s.default=n,Object.freeze(s)}const o=O(I),L={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},P={none:"none",asc:"ascending",desc:"descending"};class R extends o.Component{constructor(s){super(s),this.serviceIndex=0,this.index=-1,this.cellKeyDown=(r,l)=>{r.isDefaultPrevented()||r.keyCode===u.Keys.enter&&this.cellClick(r,l)},this.cells=r=>r.map(l=>{const e=this.props.columns[l],i=this.props.sortable&&e.sortable,a=this.props.sort?this.props.sort.findIndex(t=>t.field===e.field):-1,p=a>=0&&this.props.sort[a].dir||"none",c=e.columnMenu===null?null:e.columnMenu||this.props.columnMenu,S=u.classNames({"k-first":e.kFirst,"k-filterable":!!c,"k-table-th":!0,"k-header":!0,"k-grid-header-sticky":e.locked,"k-sorted":this.props.sort&&this.props.sort.some(t=>t.field===e.field)},e.headerClassName);e.locked===!1&&(e.left=0);const y=e.left!==void 0?this.props.isRtl?{left:e.right,right:e.left}:{left:e.left,right:e.right}:{},D=b.provideLocalizationService(this).toLanguageString(f.sortAriaLabel,f.messages[f.sortAriaLabel]),H=e.isAccessible?{ariaSort:P[p],role:"columnheader",ariaColumnIndex:e.ariaColumnIndex,ariaSelected:!1,ariaDescription:i?D:""}:{role:"presentation"},d=e.declarationIndex>=0?++this.index:--this.serviceIndex,v=e.headerCell?e.headerCell:M.GridHeaderCell,z=o.createElement(v,{key:1,field:e.field,onClick:i&&(t=>this.cellClick(t,e))||void 0,selectionChange:this.props.selectionChange,title:e.title,selectionValue:e.headerSelectionValue,render:this.props.cellRender,children:this.sortIcon(a),columnMenuWrapperProps:{column:{field:e.field,title:e.title,locked:e.locked,filter:e.filter,id:e.id},sortable:i&&this.props.sortable,sort:this.props.sort,onSortChange:this.props.sortChange,filter:this.props.filter,filterable:this.props.filterable&&e.filterable,filterOperators:this.props.filterOperators,onFilterChange:this.props.filterChange,group:this.props.group,groupable:this.props.groupable,onGroupChange:this.props.groupChange,columnMenu:c}}),m={...H,key:d,colSpan:e.colSpan,rowSpan:e.rowSpan,className:S,style:y,columnId:e.id,navigatable:e.navigatable,onKeyDown:i&&(t=>this.cellKeyDown(t,e))||void 0,role:"columnheader"},g=[z,this.props.columnResize&&this.props.columnResize.resizable&&e.resizable&&o.createElement(C.ColumnResizer,{key:2,resize:(t,w,x)=>this.props.columnResize&&this.props.columnResize.dragHandler(t,e,w,x),autofit:t=>this.props.columnResize&&this.props.columnResize.dblClickHandler(t,[e.id])})],h=N.resolveCells(this.props.cells,e.cells);if(h&&h.headerCell){const t=h.headerCell;return o.createElement(t,{key:d,thProps:m,index:l},g)}return o.createElement(C.HeaderThElement,{...m,key:d},g)}),this.cellClick=this.cellClick.bind(this)}cellClick(s,r){if(s.preventDefault(),!this.props.sortChange)return;const{allowUnsort:l,mode:e}=q.normalize(this.props.sortable||!1,r.sortable||!1),i=(this.props.sort||[]).filter(c=>c.field===r.field)[0],a=L[l][i&&i.dir||""],p=e==="single"?[]:(this.props.sort||[]).filter(c=>c.field!==r.field);a!==""&&r.field&&p.push({field:r.field,dir:a}),this.props.sortChange(p,s)}sortIcon(s){return this.props.sort?s>=0&&[o.createElement("span",{key:1,className:"k-sort-icon"},o.createElement(u.IconWrap,{name:"sort-"+this.props.sort[s].dir+"-small",icon:this.props.sort[s].dir==="asc"?k.sortAscSmallIcon:k.sortDescSmallIcon})),this.props.sort.length>1&&o.createElement("span",{key:2,className:"k-sort-icon"},o.createElement("span",{className:"k-sort-order"},s+1))]:null}render(){return this.serviceIndex=0,this.index=-1,this.props.columnsMap.map((s,r)=>this.props.pressHandler&&o.createElement(E.ColumnDraggable,{key:r,pressHandler:this.props.pressHandler,dragHandler:this.props.dragHandler,releaseHandler:this.props.releaseHandler,ariaRowIndex:r+1,dragClue:this.props.dragClue,headerRef:this.props.headerRef,containerRef:this.props.containerRef},this.cells(s))||o.createElement("tr",{key:r,className:"k-table-row",role:"row","aria-rowindex":r+1},this.cells(s)))}}b.registerForLocalization(R);exports.HeaderRow=R;

package/header/HeaderRow.mjs

@@ -0,0 +1,155 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as o from "react";
+import { normalize as z } from "../interfaces/GridSortSettings.mjs";
+import { ColumnDraggable as H } from "../drag/ColumnDraggable.mjs";
+import { GridHeaderCell as v } from "./GridHeaderCell.mjs";
+import { Keys as w, classNames as x, IconWrap as D } from "@progress/kendo-react-common";
+import { ColumnResizer as E, HeaderThElement as I } from "@progress/kendo-react-data-tools";
+import { provideLocalizationService as M, registerForLocalization as N } from "@progress/kendo-react-intl";
+import { sortAriaLabel as f, messages as L } from "../messages/index.mjs";
+import { sortAscSmallIcon as A, sortDescSmallIcon as K } from "@progress/kendo-svg-icons";
+import { resolveCells as F } from "../utils/index.mjs";
+const P = {
+  true: { asc: "desc", desc: "", "": "asc" },
+  false: { asc: "desc", desc: "asc", "": "asc" }
+}, G = {
+  none: "none",
+  asc: "ascending",
+  desc: "descending"
+};
+class O extends o.Component {
+  constructor(t) {
+    super(t), this.serviceIndex = 0, this.index = -1, this.cellKeyDown = (s, i) => {
+      s.isDefaultPrevented() || s.keyCode === w.enter && this.cellClick(s, i);
+    }, this.cells = (s) => s.map((i) => {
+      const e = this.props.columns[i], l = this.props.sortable && e.sortable, a = this.props.sort ? this.props.sort.findIndex((r) => r.field === e.field) : -1, p = a >= 0 && this.props.sort[a].dir || "none", n = e.columnMenu === null ? null : e.columnMenu || this.props.columnMenu, u = x({
+        "k-first": e.kFirst,
+        "k-filterable": !!n,
+        "k-table-th": !0,
+        "k-header": !0,
+        "k-grid-header-sticky": e.locked,
+        "k-sorted": this.props.sort && this.props.sort.some((r) => r.field === e.field)
+      }, e.headerClassName);
+      e.locked === !1 && (e.left = 0);
+      const g = e.left !== void 0 ? this.props.isRtl ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {}, C = M(this).toLanguageString(f, L[f]), k = e.isAccessible ? {
+        ariaSort: G[p],
+        role: "columnheader",
+        ariaColumnIndex: e.ariaColumnIndex,
+        ariaSelected: !1,
+        ariaDescription: l ? C : ""
+      } : {
+        role: "presentation"
+      }, c = e.declarationIndex >= 0 ? ++this.index : --this.serviceIndex, b = e.headerCell ? e.headerCell : v, R = /* @__PURE__ */ o.createElement(
+        b,
+        {
+          key: 1,
+          field: e.field,
+          onClick: l && ((r) => this.cellClick(r, e)) || void 0,
+          selectionChange: this.props.selectionChange,
+          title: e.title,
+          selectionValue: e.headerSelectionValue,
+          render: this.props.cellRender,
+          children: this.sortIcon(a),
+          columnMenuWrapperProps: {
+            column: {
+              field: e.field,
+              title: e.title,
+              locked: e.locked,
+              filter: e.filter,
+              id: e.id
+            },
+            sortable: l && this.props.sortable,
+            sort: this.props.sort,
+            onSortChange: this.props.sortChange,
+            filter: this.props.filter,
+            filterable: this.props.filterable && e.filterable,
+            filterOperators: this.props.filterOperators,
+            onFilterChange: this.props.filterChange,
+            group: this.props.group,
+            groupable: this.props.groupable,
+            onGroupChange: this.props.groupChange,
+            columnMenu: n
+          }
+        }
+      ), h = {
+        ...k,
+        key: c,
+        colSpan: e.colSpan,
+        rowSpan: e.rowSpan,
+        className: u,
+        style: g,
+        columnId: e.id,
+        navigatable: e.navigatable,
+        onKeyDown: l && ((r) => this.cellKeyDown(r, e)) || void 0,
+        role: "columnheader"
+      }, m = [
+        R,
+        this.props.columnResize && this.props.columnResize.resizable && e.resizable && /* @__PURE__ */ o.createElement(
+          E,
+          {
+            key: 2,
+            resize: (r, y, S) => this.props.columnResize && this.props.columnResize.dragHandler(r, e, y, S),
+            autofit: (r) => this.props.columnResize && this.props.columnResize.dblClickHandler(r, [e.id])
+          }
+        )
+      ], d = F(this.props.cells, e.cells);
+      if (d && d.headerCell) {
+        const r = d.headerCell;
+        return /* @__PURE__ */ o.createElement(r, { key: c, thProps: h, index: i }, m);
+      }
+      return /* @__PURE__ */ o.createElement(
+        I,
+        {
+          ...h,
+          key: c
+        },
+        m
+      );
+    }), this.cellClick = this.cellClick.bind(this);
+  }
+  cellClick(t, s) {
+    if (t.preventDefault(), !this.props.sortChange)
+      return;
+    const { allowUnsort: i, mode: e } = z(this.props.sortable || !1, s.sortable || !1), l = (this.props.sort || []).filter((n) => n.field === s.field)[0], a = P[i][l && l.dir || ""], p = e === "single" ? [] : (this.props.sort || []).filter((n) => n.field !== s.field);
+    a !== "" && s.field && p.push({ field: s.field, dir: a }), this.props.sortChange(p, t);
+  }
+  sortIcon(t) {
+    return this.props.sort ? t >= 0 && [
+      /* @__PURE__ */ o.createElement("span", { key: 1, className: "k-sort-icon" }, /* @__PURE__ */ o.createElement(
+        D,
+        {
+          name: "sort-" + this.props.sort[t].dir + "-small",
+          icon: this.props.sort[t].dir === "asc" ? A : K
+        }
+      )),
+      this.props.sort.length > 1 && /* @__PURE__ */ o.createElement("span", { key: 2, className: "k-sort-icon" }, /* @__PURE__ */ o.createElement("span", { className: "k-sort-order" }, t + 1))
+    ] : null;
+  }
+  render() {
+    return this.serviceIndex = 0, this.index = -1, this.props.columnsMap.map((t, s) => this.props.pressHandler && /* @__PURE__ */ o.createElement(
+      H,
+      {
+        key: s,
+        pressHandler: this.props.pressHandler,
+        dragHandler: this.props.dragHandler,
+        releaseHandler: this.props.releaseHandler,
+        ariaRowIndex: s + 1,
+        dragClue: this.props.dragClue,
+        headerRef: this.props.headerRef,
+        containerRef: this.props.containerRef
+      },
+      this.cells(t)
+    ) || /* @__PURE__ */ o.createElement("tr", { key: s, className: "k-table-row", role: "row", "aria-rowindex": s + 1 }, this.cells(t)));
+  }
+}
+N(O);
+export {
+  O as HeaderRow
+};