@progress/kendo-react-grid 8.3.0-develop.3 → 8.3.0-develop.5

package/drag/ColumnDraggable.mjs

@@ -6,23 +6,24 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as s from "react";
-import { Draggable as t } from "@progress/kendo-react-common";
-class o extends s.PureComponent {
+import * as r from "react";
+import { uGrid as s, Draggable as n, classNames as a, UnstyledContext as o } from "@progress/kendo-react-common";
+class i extends r.PureComponent {
   constructor() {
-    super(...arguments), this.draggable = null, this.onPress = (e) => {
-      const r = this.draggable && this.draggable.element;
-      r && this.props.pressHandler && this.props.pressHandler(e.event, r);
-    }, this.onDrag = (e) => {
-      const r = this.draggable && this.draggable.element;
-      r && this.props.dragHandler && this.props.dragHandler(e.event, r);
-    }, this.onRelease = (e) => {
-      this.draggable && this.draggable.element && this.props.releaseHandler && this.props.releaseHandler(e.event);
+    super(...arguments), this.draggable = null, this.onPress = (t) => {
+      const e = this.draggable && this.draggable.element;
+      e && this.props.pressHandler && this.props.pressHandler(t.event, e);
+    }, this.onDrag = (t) => {
+      const e = this.draggable && this.draggable.element;
+      e && this.props.dragHandler && this.props.dragHandler(t.event, e);
+    }, this.onRelease = (t) => {
+      this.draggable && this.draggable.element && this.props.releaseHandler && this.props.releaseHandler(t.event);
     };
   }
   render() {
-    return /* @__PURE__ */ s.createElement(
-      t,
+    const t = this.context && this.context.uGrid ? this.context.uGrid : s;
+    return /* @__PURE__ */ r.createElement(
+      n,
       {
         onPress: this.onPress,
         onDrag: this.onDrag,
@@ -34,10 +35,11 @@ class o extends s.PureComponent {
           this.draggable = e;
         }
       },
-      /* @__PURE__ */ s.createElement("tr", { className: "k-table-row", style: { touchAction: "none" }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, this.props.children)
+      /* @__PURE__ */ r.createElement("tr", { className: a(t.simpleTr({})), style: { touchAction: "none" }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, this.props.children)
     );
   }
 }
+i.contextType = o;
 export {
-  o as ColumnDraggable
+  i as ColumnDraggable
 };

package/header/GridHeaderCell.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 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;
+"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;

package/header/GridHeaderCell.mjs

@@ -6,33 +6,27 @@
  *-------------------------------------------------------------------------------------------
  */
 "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;
-  }
-}
+import { useUnstyled as s, uGrid as m, classNames as t } 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 ? {
+    onClick: e.onClick
+  } : {}, c = /* @__PURE__ */ n.createElement("span", { className: t(r.headerCellInner({})) }, /* @__PURE__ */ n.createElement(
+    "span",
+    {
+      className: t(
+        r.headerCellLink({
+          sortable: e.columnMenuWrapperProps.sortable
+        })
+      ),
+      ...i
+    },
+    /* @__PURE__ */ n.createElement("span", { className: t(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;
+};
 export {
-  c as GridHeaderCell
+  C as GridHeaderCell
 };

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 l=require("react"),d=require("../columnMenu/GridColumnMenuWrapper.js"),c=require("../messages/index.js"),i=require("@progress/kendo-react-intl"),p=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",tabIndex:-1,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(d.GridColumnMenuWrapper,{...e})];return this.props.render?this.props.render.call(void 0,n,this.props):n}}i.registerForLocalization(s);const h=p.withIdHOC(s);exports.GridHeaderSelectionCell=h;
+"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;

package/header/GridHeaderSelectionCell.mjs

@@ -10,7 +10,7 @@ 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 } from "@progress/kendo-react-common";
+import { withIdHOC as d, withUnstyledHOC as h } from "@progress/kendo-react-common";
 class i extends e.Component {
   get _inputId() {
     return this.props.id;
@@ -39,7 +39,7 @@ class i extends e.Component {
   }
 }
 p(i);
-const g = d(i);
+const C = d(h(i));
 export {
-  g as GridHeaderSelectionCell
+  C as GridHeaderSelectionCell
 };

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"),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.props.hasScrollbarWidth?{}:{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;
+"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;

package/header/Header.mjs

@@ -6,10 +6,10 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as t from "react";
-import { getScrollbarWidth as o, classNames as s, kendoThemeMaps as i } from "@progress/kendo-react-common";
+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 t.Component {
+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) {
@@ -18,8 +18,8 @@ class d extends t.Component {
       }
       if (!this.headerWrap)
         return;
-      const l = this.headerWrap.scrollLeft, r = this.props.scrollableDataElement();
-      r && r.scrollLeft !== l && (r.scrollLeft = l);
+      const l = this.headerWrap.scrollLeft, t = this.props.scrollableDataElement();
+      t && t.scrollLeft !== l && (t.scrollLeft = l);
     };
   }
   get element() {
@@ -44,57 +44,45 @@ class d extends t.Component {
     this.table && (this.table.style.width = e + "px");
   }
   render() {
-    return this.props.staticHeaders ? /* @__PURE__ */ t.createElement(
+    const e = this.context && this.context.uGrid ? this.context.uGrid : i, { size: l = "md" } = this.props;
+    return this.props.staticHeaders ? /* @__PURE__ */ s.createElement(
       "div",
       {
         ref: this.props.elemRef,
-        className: s(
-          "k-grid-header",
-          { "k-grid-draggable-header": this.props.draggable }
-        ),
+        className: r(e.header({ draggable: this.props.draggable }), this.props.className),
         role: "presentation"
       },
-      /* @__PURE__ */ t.createElement(
+      /* @__PURE__ */ s.createElement(
         "div",
         {
-          ref: (e) => {
-            this.headerWrap = e;
+          ref: (t) => {
+            this.headerWrap = t;
           },
-          className: "k-grid-header-wrap",
+          className: r(e.headerWrap({})),
           style: this.props.hasScrollbarWidth ? {} : { borderWidth: 0 },
           onScroll: this.onScroll,
           role: "presentation"
         },
-        /* @__PURE__ */ t.createElement(
+        /* @__PURE__ */ s.createElement(
           "table",
           {
-            ref: (e) => {
-              this.table = e;
+            ref: (t) => {
+              this.table = t;
             },
-            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
-            ),
+            className: r(e.headerTable({ size: l }), this.props.className),
             role: "presentation"
           },
-          /* @__PURE__ */ t.createElement("colgroup", { ref: (e) => {
-            this.props.columnResize.colGroupHeader = e;
+          /* @__PURE__ */ s.createElement("colgroup", { ref: (t) => {
+            this.props.columnResize.colGroupHeader = t;
           } }, this.props.cols),
-          /* @__PURE__ */ t.createElement("thead", { className: "k-table-thead", role: "rowgroup", ...a }, this.props.headerRow, this.props.filterRow)
+          /* @__PURE__ */ s.createElement("thead", { className: r(e.tableThead({})), role: "rowgroup", ...a }, this.props.headerRow, this.props.filterRow)
         )
       )
-    ) : /* @__PURE__ */ t.createElement(
+    ) : /* @__PURE__ */ s.createElement(
       "thead",
       {
         role: "presentation",
-        className: s(
-          "k-table-thead",
-          { "k-grid-draggable-header": this.props.draggable }
-        ),
+        className: r(e.thead({ draggable: this.props.draggable }), this.props.className),
         ...a
       },
       this.props.headerRow,

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

package/header/HeaderRow.mjs

@@ -7,82 +7,88 @@
  */
 "use client";
 import * as r from "react";
-import { normalize as L } from "../interfaces/GridSortSettings.mjs";
-import { ColumnDraggable as O } from "../drag/ColumnDraggable.mjs";
-import { GridHeaderCell as P } from "./GridHeaderCell.mjs";
-import { classNames as V, Keys as f, IconWrap as W } from "@progress/kendo-react-common";
-import { ColumnResizer as q, HeaderThElement as B } from "@progress/kendo-react-data-tools";
-import { useLocalization as T } from "@progress/kendo-react-intl";
-import { sortAriaLabel as M, messages as U } from "../messages/index.mjs";
-import { sortAscSmallIcon as j, sortDescSmallIcon as J } from "@progress/kendo-svg-icons";
-import { resolveCells as Q } from "../utils/index.mjs";
-const X = {
+import { normalize as T } from "../interfaces/GridSortSettings.mjs";
+import { ColumnDraggable as U } from "../drag/ColumnDraggable.mjs";
+import { GridHeaderCell as V } from "./GridHeaderCell.mjs";
+import { useUnstyled as W, uGrid as q, classNames as u, Keys as g, IconWrap as B } from "@progress/kendo-react-common";
+import { ColumnResizer as j, HeaderThElement as J } from "@progress/kendo-react-data-tools";
+import { useLocalization as Q } from "@progress/kendo-react-intl";
+import { sortAriaLabel as H, messages as X } from "../messages/index.mjs";
+import { sortAscSmallIcon as Y, sortDescSmallIcon as Z } from "@progress/kendo-svg-icons";
+import { resolveCells as _ } from "../utils/index.mjs";
+const $ = {
   true: { asc: "desc", desc: "", "": "asc" },
   false: { asc: "desc", desc: "asc", "": "asc" }
-}, Y = {
+}, p = {
   none: "none",
   asc: "ascending",
   desc: "descending"
-}, re = (e) => {
-  const [z, b] = r.useState(), H = T(), u = r.useRef(null);
-  let D = 0, E = -1;
-  const k = (t, n) => {
+}, ce = (e) => {
+  const [D, R] = r.useState(), E = Q(), C = W(), f = C && C.uGrid ? C.uGrid : q, m = r.useRef(null);
+  let x = 0, v = -1;
+  const S = (t, n) => {
     if (t.preventDefault(), !e.sortChange)
       return;
-    const { allowUnsort: l, mode: c } = L(e.sortable || !1, n.sortable || !1), o = (e.sort || []).filter((i) => i.field === n.field)[0], d = X[l][o && o.dir || ""], s = c === "single" ? [] : (e.sort || []).filter((i) => i.field !== n.field);
-    d !== "" && n.field && s.push({ field: n.field, dir: d }), e.sortChange(s, t);
-  }, I = (t, n) => {
+    const { allowUnsort: l, mode: s } = T(e.sortable || !1, n.sortable || !1), o = (e.sort || []).filter((i) => i.field === n.field)[0], d = $[l][o && o.dir || ""], c = s === "single" ? [] : (e.sort || []).filter((i) => i.field !== n.field);
+    d !== "" && n.field && c.push({ field: n.field, dir: d }), e.sortChange(c, t);
+  }, N = (t, n) => {
     if (t.isDefaultPrevented())
       return;
-    const { keyCode: l, metaKey: c, ctrlKey: o, altKey: d } = t, s = e.sortable && n.sortable, i = t.target;
-    if (s && t.keyCode === f.enter && i.className.indexOf("k-table-th") !== -1 && k(t, n), e.navigatable) {
-      if (e.groupable && (c && l === f.enter || o && l === f.space)) {
+    const { keyCode: l, metaKey: s, ctrlKey: o, altKey: d } = t, c = e.sortable && n.sortable, i = t.target;
+    if (c && t.keyCode === g.enter && i.className.indexOf("k-table-th") !== -1 && S(t, n), e.navigatable) {
+      if (e.groupable && (s && l === g.enter || o && l === g.space)) {
         t.preventDefault();
-        const m = e.columns.findIndex((g) => g.field === n.field);
-        e.columnGroupChange && e.columnGroupChange(m, t);
+        const h = e.columns.findIndex((b) => b.field === n.field);
+        e.columnGroupChange && e.columnGroupChange(h, t);
       }
-      d && l === f.down && (t.preventDefault(), b(n.field), u.current = i);
+      d && l === g.down && (t.preventDefault(), R(n.field), m.current = i);
     }
-  }, x = () => {
-    b(void 0), u.current && u.current.getAttribute("tabindex") !== "-1" && u.current.focus();
-  }, v = (t) => e.sort ? t >= 0 && [
-    /* @__PURE__ */ r.createElement("span", { key: 1, className: "k-sort-icon" }, /* @__PURE__ */ r.createElement(
-      W,
-      {
-        name: "sort-" + e.sort[t].dir + "-small",
-        icon: e.sort[t].dir === "asc" ? j : J
-      }
-    )),
-    e.sort.length > 1 && /* @__PURE__ */ r.createElement("span", { key: 2, className: "k-sort-icon" }, /* @__PURE__ */ r.createElement("span", { className: "k-sort-order" }, t + 1))
-  ] : null, y = (t) => t.map((n) => {
-    const l = e.columns[n], c = e.sortable && l.sortable, o = e.sort ? e.sort.findIndex((a) => a.field === l.field) : -1, d = o >= 0 && e.sort[o].dir || "none", s = l.columnMenu === null ? null : l.columnMenu || e.columnMenu, i = l.menuIcon || e.columnMenuIcon, m = V({
-      "k-first": l.kFirst,
-      "k-filterable": !!s,
-      "k-table-th": !0,
-      "k-header": !0,
-      "k-grid-header-sticky": l.locked,
-      "k-sorted": e.sort && e.sort.some((a) => a.field === l.field)
-    }, l.headerClassName);
+  }, G = () => {
+    R(void 0), m.current && m.current.getAttribute("tabindex") !== "-1" && m.current.focus();
+  }, K = (t) => {
+    if (!e.sort)
+      return null;
+    const n = u(f.sortIcon({}));
+    return t >= 0 && [
+      /* @__PURE__ */ r.createElement("span", { key: 1, className: n }, /* @__PURE__ */ r.createElement(
+        B,
+        {
+          name: "sort-" + e.sort[t].dir + "-small",
+          icon: e.sort[t].dir === "asc" ? Y : Z
+        }
+      )),
+      e.sort.length > 1 && /* @__PURE__ */ r.createElement("span", { key: 2, className: n }, /* @__PURE__ */ r.createElement("span", { className: u(f.sortOrder({})) }, t + 1))
+    ];
+  }, 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)
+      })),
+      l.headerClassName
+    );
     l.locked === !1 && (l.left = 0);
-    const g = l.left !== void 0 ? e.isRtl ? { left: l.right, right: l.left } : { left: l.left, right: l.right } : {}, N = H.toLanguageString(M, U[M]), K = l.isAccessible ? {
-      ariaSort: Y[d],
+    const b = l.left !== void 0 ? e.isRtl ? { left: l.right, right: l.left } : { left: l.left, right: l.right } : {}, A = E.toLanguageString(H, X[H]), F = l.isAccessible ? {
+      ariaSort: p[d],
       role: "columnheader",
       ariaColumnIndex: l.ariaColumnIndex,
       ariaSelected: !1,
-      ariaDescription: c ? N : ""
+      ariaDescription: s ? A : ""
     } : {
       role: "presentation"
-    }, h = l.declarationIndex >= 0 ? ++E : --D, A = l.headerCell ? l.headerCell : P, R = /* @__PURE__ */ r.createElement(
-      A,
+    }, k = l.declarationIndex >= 0 ? ++v : --x, L = l.headerCell ? l.headerCell : V, M = /* @__PURE__ */ r.createElement(
+      L,
       {
         key: 1,
         field: l.field,
-        onClick: c && ((a) => k(a, l)) || void 0,
+        onClick: s && ((a) => S(a, l)) || void 0,
         selectionChange: e.selectionChange,
         title: l.title,
         selectionValue: l.headerSelectionValue,
         render: e.cellRender,
-        children: v(o),
+        children: K(o),
         columnMenuWrapperProps: {
           column: {
             field: l.field,
@@ -91,60 +97,60 @@ const X = {
             filter: l.filter,
             id: l.id
           },
-          sortable: c && e.sortable,
+          sortable: s && e.sortable,
           sort: e.sort,
           onSortChange: e.sortChange,
           filter: e.filter,
           filterable: e.filterable && l.filterable,
           filterOperators: e.filterOperators,
           onFilterChange: e.filterChange,
-          show: z === l.field ? !0 : void 0,
-          onCloseMenu: x,
+          show: D === l.field ? !0 : void 0,
+          onCloseMenu: G,
           navigatable: e.navigatable,
           group: e.group,
           groupable: e.groupable,
           onGroupChange: e.groupChange,
-          columnMenu: s,
+          columnMenu: c,
           columnMenuIcon: i
         }
       }
-    ), S = {
-      ...K,
-      key: h,
+    ), w = {
+      ...F,
+      key: k,
       colSpan: l.colSpan,
       rowSpan: l.rowSpan,
-      className: m,
-      style: g,
+      className: h,
+      style: b,
       columnId: l.id,
       navigatable: l.navigatable,
-      onKeyDown: (a) => I(a, l),
+      onKeyDown: (a) => N(a, l),
       role: "columnheader"
-    }, w = [
-      R,
+    }, z = [
+      M,
       e.columnResize && e.columnResize.resizable && l.resizable && /* @__PURE__ */ r.createElement(
-        q,
+        j,
         {
           key: 2,
-          resize: (a, F, G) => e.columnResize && e.columnResize.dragHandler(a, l, F, G),
+          resize: (a, O, P) => e.columnResize && e.columnResize.dragHandler(a, l, O, P),
           autofit: (a) => e.columnResize && e.columnResize.dblClickHandler(a, [l.id])
         }
       )
-    ], C = Q(e.cells, l.cells);
-    if (C && C.headerCell) {
-      const a = C.headerCell;
-      return /* @__PURE__ */ r.createElement(a, { ...R.props, key: h, thProps: S, index: n }, w);
+    ], y = _(e.cells, l.cells);
+    if (y && y.headerCell) {
+      const a = y.headerCell;
+      return /* @__PURE__ */ r.createElement(a, { ...M.props, key: k, thProps: w, index: n }, z);
     }
     return /* @__PURE__ */ r.createElement(
-      B,
+      J,
       {
-        ...S,
-        key: h
+        ...w,
+        key: k
       },
-      w
+      z
     );
   });
   return e.columnsMap.map((t, n) => e.pressHandler && /* @__PURE__ */ r.createElement(
-    O,
+    U,
     {
       key: n,
       pressHandler: e.pressHandler,
@@ -155,9 +161,9 @@ const X = {
       headerRef: e.headerRef,
       containerRef: e.containerRef
     },
-    y(t)
-  ) || /* @__PURE__ */ r.createElement("tr", { key: n, className: "k-table-row", role: "row", "aria-rowindex": n + 1 }, y(t)));
+    I(t)
+  ) || /* @__PURE__ */ r.createElement("tr", { key: n, className: u(f.simpletr({})), role: "row", "aria-rowindex": n + 1 }, I(t)));
 };
 export {
-  re as HeaderRow
+  ce as HeaderRow
 };

package/index.d.mts

@@ -20,6 +20,7 @@ import { FilterOperator } from '@progress/kendo-react-data-tools';
 import { ForwardRefExoticComponent } from 'react';
 import { getSelectedState } from '@progress/kendo-react-data-tools';
 import { getSelectedStateFromKeyDown } from '@progress/kendo-react-data-tools';
+import { GridClassStructure } from '@progress/kendo-react-common';
 import { GroupDescriptor } from '@progress/kendo-data-query';
 import { HeaderCellBaseProps } from '@progress/kendo-react-data-tools';
 import { HeaderThElementProps } from '@progress/kendo-react-data-tools';
@@ -1861,12 +1862,7 @@ export declare interface GridHandle extends Pick<GridClassComponent, keyof GridC
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare class GridHeaderCell extends React_2.Component<GridHeaderCellProps, {}> {
-    /**
-     * @hidden
-     */
-    render(): string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
-}
+export declare const GridHeaderCell: (props: GridHeaderCellProps) => string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
 
 /**
  * The props of the GridHeaderCell component
@@ -2407,17 +2403,16 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * Sets the `id` property of the top div element of the component.
      */
     id?: string;
+    /**
+     * @hidden
+     */
+    unstyled?: GridClassStructure;
 }
 
 /**
  * The component for each of the items in the `data` property which the Grid renders.
  */
-export declare class GridRow extends React_2.Component<GridRowProps, {}> {
-    /**
-     * @hidden
-     */
-    render(): string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
-}
+export declare const GridRow: (props: GridRowProps) => string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
 
 /**
  * Represents the object of the `onRowClick` Grid event.