@progress/kendo-react-data-tools 8.2.0-develop.9 → 8.2.1-develop.1

package/filter/Filter.mjs

@@ -6,46 +6,113 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as i from "react";
-import r from "prop-types";
-import { validatePackage as p, classNames as c } from "@progress/kendo-react-common";
-import { Group as h } from "./Group.mjs";
-import { packageMetadata as u } from "../package-metadata.mjs";
-const a = class a extends i.Component {
-  constructor(s) {
-    super(s), this.onFilterChange = (e) => {
+import * as p from "react";
+import u from "prop-types";
+import { validatePackage as b, Navigation as g, disableNavigatableContainer as w, getActiveElement as f, focusFirstFocusableChild as h, enableNavigatableContainer as R, classNames as y } from "@progress/kendo-react-common";
+import { Group as E } from "./Group.mjs";
+import { packageMetadata as F } from "../package-metadata.mjs";
+const a = {
+  // Group selectors
+  andButton: "button.k-group-start",
+  orButton: "button.k-group-end",
+  addFilterButton: 'button[title="Add Expression"]',
+  addGroupButton: 'button[title="Add Group"]',
+  removeButton: 'button[title="Remove"]',
+  // Expression selectors
+  filterFieldWrapper: ".k-filter-field",
+  filterOperatorWrapper: ".k-filter-operator",
+  filterValueWrapper: ".k-filter-value",
+  toolbarElement: ".k-toolbar"
+}, m = class m extends p.Component {
+  constructor(o) {
+    super(o), this.wrapperRef = p.createRef(), this.onFilterChange = (r) => {
       const t = {
-        filter: e.nextFilter,
-        syntheticEvent: e.syntheticEvent,
-        nativeEvent: e.nativeEvent,
+        filter: r.nextFilter,
+        syntheticEvent: r.syntheticEvent,
+        nativeEvent: r.nativeEvent,
         target: this
       };
       this.props.onChange.call(void 0, t);
-    }, this.onGroupRemove = (e) => {
+    }, this.onGroupRemove = (r) => {
       const t = {
         filter: { ...this.props.value, filters: [] },
-        syntheticEvent: e.syntheticEvent,
-        nativeEvent: e.nativeEvent,
+        syntheticEvent: r.syntheticEvent,
+        nativeEvent: r.nativeEvent,
         target: this
       };
       this.props.onChange.call(void 0, t);
-    }, p(u);
+    }, this.onKeyDown = (r) => {
+      var t;
+      (t = this.navigation) == null || t.triggerKeyboardEvent(r);
+    }, b(F);
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    this.wrapperRef && (this.navigation = new g({
+      tabIndex: 0,
+      root: this.wrapperRef,
+      selectors: [".k-filter"],
+      keyboardEvents: {
+        keydown: {
+          Tab: (o, r, t) => {
+            const e = o.getElementsByClassName("k-filter-lines")[0];
+            e && w(e);
+          },
+          ArrowUp: (o, r, t) => {
+            t.preventDefault();
+            const e = f(document), i = e == null ? void 0 : e.closest(a.toolbarElement), n = o.getElementsByClassName("k-toolbar"), s = Array.from(n).findIndex((d) => d === i) - 1, c = n[s];
+            o.getElementsByClassName("k-filter-lines")[0] && h(c);
+          },
+          ArrowDown: (o, r, t) => {
+            t.preventDefault();
+            const e = f(document), i = e == null ? void 0 : e.closest(a.toolbarElement), n = o.getElementsByClassName("k-toolbar"), s = Array.from(n).findIndex((d) => d === i) + 1, c = n[s], l = o.getElementsByClassName("k-filter-lines")[0];
+            l && (R(l, [a.filterFieldWrapper, a.filterOperatorWrapper, a.filterValueWrapper]), h(c));
+          },
+          ArrowRight: (o, r, t) => {
+            t.preventDefault();
+            const e = f(document), i = e == null ? void 0 : e.nextElementSibling, n = e == null ? void 0 : e.closest(a.toolbarElement), s = o.querySelector('[aria-label="Filter toolbar"]');
+            e && i && !(n === s) && i.focus();
+          },
+          ArrowLeft: (o, r, t) => {
+            t.preventDefault();
+            const e = f(document), i = e == null ? void 0 : e.previousElementSibling, n = e == null ? void 0 : e.closest(a.toolbarElement), s = o.querySelector('[aria-label="Filter toolbar"]');
+            e && i && !(n === s) && i.focus();
+          },
+          Enter: (o, r, t) => {
+            t.preventDefault();
+            const e = f(document), i = o.querySelector(a.removeButton), n = e == null ? void 0 : e.closest(a.toolbarElement), s = o.getElementsByClassName("k-toolbar"), c = Array.from(s).findIndex((l) => l === n) - 1;
+            if (n === s[0]) {
+              const l = n.lastElementChild;
+              l && l.click();
+            }
+            if (n !== s[0]) {
+              const l = s[c].lastElementChild;
+              e && e.title === i.title && l && (e.click(), l.focus());
+            }
+          }
+        }
+      }
+    }));
   }
   /**
    * @hidden
    */
   render() {
-    return /* @__PURE__ */ i.createElement(
+    return /* @__PURE__ */ p.createElement(
       "div",
       {
-        className: c(
+        className: y(
           "k-filter",
           this.props.className
         ),
-        style: this.props.style
+        style: this.props.style,
+        ref: this.wrapperRef,
+        onKeyDown: this.onKeyDown
       },
-      /* @__PURE__ */ i.createElement("ul", { role: "tree", className: "k-filter-container", "aria-label": this.props.ariaLabel }, /* @__PURE__ */ i.createElement("li", { role: "treeitem", className: "k-filter-group-main" }, /* @__PURE__ */ i.createElement(
-        h,
+      /* @__PURE__ */ p.createElement("ul", { role: "tree", className: "k-filter-container", "aria-label": this.props.ariaLabel }, /* @__PURE__ */ p.createElement("li", { role: "treeitem", className: "k-filter-group-main" }, /* @__PURE__ */ p.createElement(
+        E,
         {
           filter: this.props.value,
           fields: this.props.fields,
@@ -59,26 +126,27 @@ const a = class a extends i.Component {
     );
   }
 };
-a.propTypes = {
-  className: r.string,
-  style: r.object,
-  fields: function(s, e) {
-    const t = s[e];
+m.propTypes = {
+  className: u.string,
+  style: u.object,
+  fields: function(o, r) {
+    const t = o[r];
     if (t === void 0)
-      return new Error(`Property '${e}' is missing.`);
+      return new Error(`Property '${r}' is missing.`);
     if (Array.isArray(t)) {
-      if (Object.keys(t.reduce((o, l) => ({ ...o, [l.name]: 1 }), {})).length !== t.length)
-        return new Error(`Property '${e}' needs to contain objects with unique 'name' field.`);
+      if (Object.keys(t.reduce((e, i) => ({ ...e, [i.name]: 1 }), {})).length !== t.length)
+        return new Error(`Property '${r}' needs to contain objects with unique 'name' field.`);
     } else
-      return new Error(`Property '${e}' needs to be Array<FieldSettings>.`);
+      return new Error(`Property '${r}' needs to be Array<FieldSettings>.`);
     return null;
   },
-  ariaLabelGroup: r.string,
-  ariaLabelExpression: r.string,
-  value: r.object.isRequired,
-  onChange: r.func.isRequired
+  ariaLabelGroup: u.string,
+  ariaLabelExpression: u.string,
+  value: u.object.isRequired,
+  onChange: u.func.isRequired
 };
-let n = a;
+let v = m;
 export {
-  n as Filter
+  v as Filter,
+  a as selectors
 };

package/filter/Group.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 f=require("react"),a=require("prop-types"),v=require("@progress/kendo-data-query"),l=require("@progress/kendo-react-buttons"),d=require("@progress/kendo-react-intl"),u=require("@progress/kendo-svg-icons"),m=require("./Expression.js"),E=require("./operators.js"),r=require("../messages/index.js");function b(c){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>c[t]})}}return e.default=c,Object.freeze(e)}const o=b(f),g=class g extends o.Component{constructor(){super(...arguments),this.onGroupRemove=e=>{const t={filter:this.props.filter,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onRemove.call(void 0,t)},this.onAddExpression=e=>{const t=this.props.filter,i=this.props.fields[0],n={field:i.name,operator:i.operators[0].operator};n.value=E.stringOperator(n.operator)?"":null;const s={nextFilter:{...t,filters:[...t.filters,n]},prevFilter:t,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onChange.call(void 0,s)},this.onAddGroup=e=>{const t=this.props.filter,i={nextFilter:{...t,filters:[...t.filters,{...this.props.defaultGroupFilter}]},prevFilter:t,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onChange.call(void 0,i)},this.onLogicAnd=e=>this.changeLogic("and",e),this.onLogicOr=e=>this.changeLogic("or",e),this.changeLogic=(e,t)=>{const i=this.props.filter;if(i.logic!==e){const n={nextFilter:{...i,logic:e},prevFilter:i,target:this,syntheticEvent:t,nativeEvent:t.nativeEvent};this.props.onChange.call(void 0,n)}},this.replaceFilter=(e,t)=>{const i=this.props.filter,n=i.filters.map(s=>s===e?t:s);return{...i,filters:n}},this.onChange=e=>{const i={nextFilter:this.replaceFilter(e.prevFilter,e.nextFilter),prevFilter:this.props.filter,syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:this};this.props.onChange.call(void 0,i)},this.onRemove=e=>{const t=this.props.filter,i=t.filters.filter(s=>s!==e.filter),n={nextFilter:{...t,filters:i},prevFilter:t,syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:this};this.props.onChange.call(void 0,n)}}render(){const e=d.provideLocalizationService(this),{fields:t,filter:i,ariaLabel:n=e.toLanguageString(r.filterGroupAriaLabel,r.messages[r.filterGroupAriaLabel])}=this.props;return o.createElement(o.Fragment,null,o.createElement("div",{className:"k-filter-toolbar"},o.createElement(l.Toolbar,{keyboardNavigation:!1,role:"toolbar",ariaLabel:n},o.createElement(l.ButtonGroup,{className:"k-toolbar-button-group k-button-group-solid"},o.createElement(l.Button,{togglable:!0,onClick:this.onLogicAnd,selected:i.logic==="and",type:"button"},e.toLanguageString(r.filterAndLogic,r.messages[r.filterAndLogic])),o.createElement(l.Button,{togglable:!0,onClick:this.onLogicOr,selected:i.logic==="or",type:"button"},e.toLanguageString(r.filterOrLogic,r.messages[r.filterOrLogic]))),o.createElement(l.Button,{className:"k-toolbar-button",title:e.toLanguageString(r.filterAddExpression,r.messages[r.filterAddExpression]),icon:"filter-add-expression",svgIcon:u.filterAddExpressionIcon,type:"button",onClick:this.onAddExpression},e.toLanguageString(r.filterAddExpression,r.messages[r.filterAddExpression])),o.createElement(l.Button,{className:"k-toolbar-button",title:e.toLanguageString(r.filterAddGroup,r.messages[r.filterAddGroup]),icon:"filter-add-group",svgIcon:u.filterAddGroupIcon,type:"button",onClick:this.onAddGroup},e.toLanguageString(r.filterAddGroup,r.messages[r.filterAddGroup])),o.createElement(l.Button,{className:"k-toolbar-button",title:e.toLanguageString(r.filterClose,r.messages[r.filterClose]),icon:"x",svgIcon:u.xIcon,fillMode:"flat",type:"button",onClick:this.onGroupRemove}))),i.filters.length>0&&o.createElement("ul",{role:"group",className:"k-filter-lines"},i.filters.map((s,h)=>o.createElement("li",{role:"treeitem",key:h,className:"k-filter-item"},v.isCompositeFilterDescriptor(s)?o.createElement(g,{filter:s,fields:t,onChange:this.onChange,onRemove:this.onRemove,defaultGroupFilter:this.props.defaultGroupFilter,ariaLabel:this.props.ariaLabel,ariaLabelExpression:this.props.ariaLabelExpression}):o.createElement(m.Expression,{filter:s,fields:t,ariaLabel:this.props.ariaLabelExpression,onChange:this.onChange,onRemove:this.onRemove})))))}};g.propTypes={filter:a.object.isRequired,fields:a.array.isRequired,ariaLabel:a.string,ariaLabelExpression:a.string,onChange:a.func.isRequired,onRemove:a.func.isRequired,defaultGroupFilter:a.object.isRequired};let p=g;d.registerForLocalization(p);exports.Group=p;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),a=require("prop-types"),v=require("@progress/kendo-data-query"),l=require("@progress/kendo-react-buttons"),d=require("@progress/kendo-react-intl"),u=require("@progress/kendo-svg-icons"),m=require("./Expression.js"),E=require("./operators.js"),r=require("../messages/index.js");function b(c){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>c[t]})}}return e.default=c,Object.freeze(e)}const o=b(f),g=class g extends o.Component{constructor(){super(...arguments),this.onGroupRemove=e=>{const t={filter:this.props.filter,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onRemove.call(void 0,t)},this.onAddExpression=e=>{const t=this.props.filter,i=this.props.fields[0],n={field:i.name,operator:i.operators[0].operator};n.value=E.stringOperator(n.operator)?"":null;const s={nextFilter:{...t,filters:[...t.filters,n]},prevFilter:t,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onChange.call(void 0,s)},this.onAddGroup=e=>{const t=this.props.filter,i={nextFilter:{...t,filters:[...t.filters,{...this.props.defaultGroupFilter}]},prevFilter:t,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onChange.call(void 0,i)},this.onLogicAnd=e=>this.changeLogic("and",e),this.onLogicOr=e=>this.changeLogic("or",e),this.changeLogic=(e,t)=>{const i=this.props.filter;if(i.logic!==e){const n={nextFilter:{...i,logic:e},prevFilter:i,target:this,syntheticEvent:t,nativeEvent:t.nativeEvent};this.props.onChange.call(void 0,n)}},this.replaceFilter=(e,t)=>{const i=this.props.filter,n=i.filters.map(s=>s===e?t:s);return{...i,filters:n}},this.onChange=e=>{const i={nextFilter:this.replaceFilter(e.prevFilter,e.nextFilter),prevFilter:this.props.filter,syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:this};this.props.onChange.call(void 0,i)},this.onRemove=e=>{const t=this.props.filter,i=t.filters.filter(s=>s!==e.filter),n={nextFilter:{...t,filters:i},prevFilter:t,syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:this};this.props.onChange.call(void 0,n)}}render(){const e=d.provideLocalizationService(this),{fields:t,filter:i,ariaLabel:n=e.toLanguageString(r.filterGroupAriaLabel,r.messages[r.filterGroupAriaLabel])}=this.props;return o.createElement(o.Fragment,null,o.createElement("div",{className:"k-filter-toolbar"},o.createElement(l.Toolbar,{role:"toolbar",ariaLabel:n},o.createElement(l.ButtonGroup,{className:"k-toolbar-button-group k-button-group-solid"},o.createElement(l.Button,{togglable:!0,onClick:this.onLogicAnd,selected:i.logic==="and",type:"button"},e.toLanguageString(r.filterAndLogic,r.messages[r.filterAndLogic])),o.createElement(l.Button,{togglable:!0,onClick:this.onLogicOr,selected:i.logic==="or",type:"button"},e.toLanguageString(r.filterOrLogic,r.messages[r.filterOrLogic]))),o.createElement(l.Button,{className:"k-toolbar-button",title:e.toLanguageString(r.filterAddExpression,r.messages[r.filterAddExpression]),icon:"filter-add-expression",svgIcon:u.filterAddExpressionIcon,type:"button",onClick:this.onAddExpression},e.toLanguageString(r.filterAddExpression,r.messages[r.filterAddExpression])),o.createElement(l.Button,{className:"k-toolbar-button",title:e.toLanguageString(r.filterAddGroup,r.messages[r.filterAddGroup]),icon:"filter-add-group",svgIcon:u.filterAddGroupIcon,type:"button",onClick:this.onAddGroup},e.toLanguageString(r.filterAddGroup,r.messages[r.filterAddGroup])),o.createElement(l.Button,{className:"k-toolbar-button",title:e.toLanguageString(r.filterClose,r.messages[r.filterClose]),icon:"x",svgIcon:u.xIcon,fillMode:"flat",type:"button",onClick:this.onGroupRemove}))),i.filters.length>0&&o.createElement("ul",{role:"group",className:"k-filter-lines"},i.filters.map((s,h)=>o.createElement("li",{role:"treeitem",key:h,className:"k-filter-item"},v.isCompositeFilterDescriptor(s)?o.createElement(g,{filter:s,fields:t,onChange:this.onChange,onRemove:this.onRemove,defaultGroupFilter:this.props.defaultGroupFilter,ariaLabel:this.props.ariaLabel,ariaLabelExpression:this.props.ariaLabelExpression}):o.createElement(m.Expression,{filter:s,fields:t,ariaLabel:this.props.ariaLabelExpression,onChange:this.onChange,onRemove:this.onRemove})))))}};g.propTypes={filter:a.object.isRequired,fields:a.array.isRequired,ariaLabel:a.string,ariaLabelExpression:a.string,onChange:a.func.isRequired,onRemove:a.func.isRequired,defaultGroupFilter:a.object.isRequired};let p=g;d.registerForLocalization(p);exports.Group=p;

package/filter/Group.mjs

@@ -7,12 +7,12 @@
  */
 "use client";
 import * as r from "react";
-import a from "prop-types";
+import l from "prop-types";
 import { isCompositeFilterDescriptor as E } from "@progress/kendo-data-query";
-import { Toolbar as b, ButtonGroup as L, Button as l } from "@progress/kendo-react-buttons";
+import { Toolbar as b, ButtonGroup as L, Button as a } from "@progress/kendo-react-buttons";
 import { provideLocalizationService as F, registerForLocalization as x } from "@progress/kendo-react-intl";
-import { filterAddExpressionIcon as C, filterAddGroupIcon as y, xIcon as k } from "@progress/kendo-svg-icons";
-import { Expression as R } from "./Expression.mjs";
+import { filterAddExpressionIcon as C, filterAddGroupIcon as y, xIcon as R } from "@progress/kendo-svg-icons";
+import { Expression as k } from "./Expression.mjs";
 import { stringOperator as A } from "./operators.mjs";
 import { filterGroupAriaLabel as f, messages as s, filterAndLogic as v, filterOrLogic as m, filterAddExpression as p, filterAddGroup as c, filterClose as u } from "../messages/index.mjs";
 const g = class g extends r.Component {
@@ -89,8 +89,8 @@ const g = class g extends r.Component {
       filter: i,
       ariaLabel: o = t.toLanguageString(f, s[f])
     } = this.props;
-    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", { className: "k-filter-toolbar" }, /* @__PURE__ */ r.createElement(b, { keyboardNavigation: !1, role: "toolbar", ariaLabel: o }, /* @__PURE__ */ r.createElement(L, { className: "k-toolbar-button-group k-button-group-solid" }, /* @__PURE__ */ r.createElement(l, { togglable: !0, onClick: this.onLogicAnd, selected: i.logic === "and", type: "button" }, t.toLanguageString(v, s[v])), /* @__PURE__ */ r.createElement(l, { togglable: !0, onClick: this.onLogicOr, selected: i.logic === "or", type: "button" }, t.toLanguageString(m, s[m]))), /* @__PURE__ */ r.createElement(
-      l,
+    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", { className: "k-filter-toolbar" }, /* @__PURE__ */ r.createElement(b, { role: "toolbar", ariaLabel: o }, /* @__PURE__ */ r.createElement(L, { className: "k-toolbar-button-group k-button-group-solid" }, /* @__PURE__ */ r.createElement(a, { togglable: !0, onClick: this.onLogicAnd, selected: i.logic === "and", type: "button" }, t.toLanguageString(v, s[v])), /* @__PURE__ */ r.createElement(a, { togglable: !0, onClick: this.onLogicOr, selected: i.logic === "or", type: "button" }, t.toLanguageString(m, s[m]))), /* @__PURE__ */ r.createElement(
+      a,
       {
         className: "k-toolbar-button",
         title: t.toLanguageString(p, s[p]),
@@ -101,7 +101,7 @@ const g = class g extends r.Component {
       },
       t.toLanguageString(p, s[p])
     ), /* @__PURE__ */ r.createElement(
-      l,
+      a,
       {
         className: "k-toolbar-button",
         title: t.toLanguageString(c, s[c]),
@@ -112,12 +112,12 @@ const g = class g extends r.Component {
       },
       t.toLanguageString(c, s[c])
     ), /* @__PURE__ */ r.createElement(
-      l,
+      a,
       {
         className: "k-toolbar-button",
         title: t.toLanguageString(u, s[u]),
         icon: "x",
-        svgIcon: k,
+        svgIcon: R,
         fillMode: "flat",
         type: "button",
         onClick: this.onGroupRemove
@@ -135,7 +135,7 @@ const g = class g extends r.Component {
           ariaLabelExpression: this.props.ariaLabelExpression
         }
       ) : /* @__PURE__ */ r.createElement(
-        R,
+        k,
         {
           filter: n,
           fields: e,
@@ -148,13 +148,13 @@ const g = class g extends r.Component {
   }
 };
 g.propTypes = {
-  filter: a.object.isRequired,
-  fields: a.array.isRequired,
-  ariaLabel: a.string,
-  ariaLabelExpression: a.string,
-  onChange: a.func.isRequired,
-  onRemove: a.func.isRequired,
-  defaultGroupFilter: a.object.isRequired
+  filter: l.object.isRequired,
+  fields: l.array.isRequired,
+  ariaLabel: l.string,
+  ariaLabelExpression: l.string,
+  onChange: l.func.isRequired,
+  onRemove: l.func.isRequired,
+  defaultGroupFilter: l.object.isRequired
 };
 let h = g;
 x(h);

package/filter/filters/DateFilter.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 c=require("react"),n=require("prop-types"),l=require("@progress/kendo-react-dateinputs");function u(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const s=u(c),i=class i extends s.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onFilterChange.call(void 0,{nextFilter:{...this.props.filter,value:e.value}})}}render(){const e=this.props.filter;return s.createElement(l.DatePicker,{value:e.value||null,onChange:this.onChange,ariaLabel:this.props.ariaLabel})}};i.propTypes={filter:n.object.isRequired,onFilterChange:n.func.isRequired,ariaLabel:n.string};let a=i;exports.DateFilter=a;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),n=require("prop-types"),l=require("@progress/kendo-react-dateinputs");function u(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const s=u(c),i=class i extends s.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onFilterChange.call(void 0,{nextFilter:{...this.props.filter,value:e.value}})}}render(){const e=this.props.filter;return s.createElement(l.DatePicker,{value:e.value||null,onChange:this.onChange,ariaLabel:this.props.ariaLabel,tabIndex:-1})}};i.propTypes={filter:n.object.isRequired,onFilterChange:n.func.isRequired,ariaLabel:n.string};let a=i;exports.DateFilter=a;

package/filter/filters/DateFilter.mjs

@@ -8,7 +8,7 @@
 "use client";
 import * as i from "react";
 import r from "prop-types";
-import { DatePicker as o } from "@progress/kendo-react-dateinputs";
+import { DatePicker as a } from "@progress/kendo-react-dateinputs";
 const t = class t extends i.Component {
   constructor() {
     super(...arguments), this.onChange = (e) => {
@@ -23,11 +23,12 @@ const t = class t extends i.Component {
   render() {
     const e = this.props.filter;
     return /* @__PURE__ */ i.createElement(
-      o,
+      a,
       {
         value: e.value || null,
         onChange: this.onChange,
-        ariaLabel: this.props.ariaLabel
+        ariaLabel: this.props.ariaLabel,
+        tabIndex: -1
       }
     );
   }

package/filter/filters/EnumFilter.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 f=require("react"),t=require("prop-types"),b=require("@progress/kendo-react-dropdowns"),p=require("@progress/kendo-react-intl"),i=require("../../messages/index.js");function h(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>n[r]})}}return e.default=n,Object.freeze(e)}const u=h(f),l=class l extends u.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onFilterChange.call(void 0,{nextFilter:{...this.props.filter,value:e.value.value}})}}render(){const e=p.provideLocalizationService(this),{filter:r,data:o=[],defaultItem:d,ariaLabel:g=e.toLanguageString(i.filterEnumFilterDropdownAriaLabel,i.messages[i.filterEnumFilterDropdownAriaLabel])}=this.props,c=o.map(a=>({...a,text:e.toLanguageString(a.text,i.messages[a.text]||a.text)}));return u.createElement(b.DropDownList,{value:c.find(a=>a.value===r.value)||null,onChange:this.onChange,defaultItem:d,data:c,textField:"text",ariaLabel:g})}};l.propTypes={filter:t.object.isRequired,onFilterChange:t.func.isRequired,data:t.arrayOf(t.shape({text:t.string,value:t.any})),defaultItem:t.any,ariaLabel:t.string};let s=l;p.registerForLocalization(s);exports.EnumFilter=s;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),t=require("prop-types"),b=require("@progress/kendo-react-dropdowns"),d=require("@progress/kendo-react-intl"),i=require("../../messages/index.js");function h(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>n[r]})}}return e.default=n,Object.freeze(e)}const u=h(f),l=class l extends u.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onFilterChange.call(void 0,{nextFilter:{...this.props.filter,value:e.value.value}})}}render(){const e=d.provideLocalizationService(this),{filter:r,data:o=[],defaultItem:p,ariaLabel:g=e.toLanguageString(i.filterEnumFilterDropdownAriaLabel,i.messages[i.filterEnumFilterDropdownAriaLabel])}=this.props,c=o.map(a=>({...a,text:e.toLanguageString(a.text,i.messages[a.text]||a.text)}));return u.createElement(b.DropDownList,{value:c.find(a=>a.value===r.value)||null,onChange:this.onChange,defaultItem:p,data:c,textField:"text",ariaLabel:g,tabIndex:-1})}};l.propTypes={filter:t.object.isRequired,onFilterChange:t.func.isRequired,data:t.arrayOf(t.shape({text:t.string,value:t.any})),defaultItem:t.any,ariaLabel:t.string};let s=l;d.registerForLocalization(s);exports.EnumFilter=s;

package/filter/filters/EnumFilter.mjs

@@ -40,7 +40,8 @@ const o = class o extends n.Component {
         defaultItem: u,
         data: i,
         textField: "text",
-        ariaLabel: g
+        ariaLabel: g,
+        tabIndex: -1
       }
     );
   }

package/filter/filters/NumericFilter.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 g=require("react"),c=require("prop-types"),f=require("@progress/kendo-react-inputs"),u=require("@progress/kendo-react-intl"),o=require("../../messages/index.js");function d(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const l=d(g),a=class a extends l.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onFilterChange.call(void 0,{nextFilter:{...this.props.filter,value:e.value}})}}render(){const e=u.provideLocalizationService(this),{min:t,max:n,filter:s,ariaLabel:p=e.toLanguageString(o.filterNumericFilterAriaLabel,o.messages[o.filterNumericFilterAriaLabel])}=this.props;return l.createElement(f.NumericTextBox,{value:typeof s.value=="number"?s.value:null,onChange:this.onChange,ariaLabel:p,min:t,max:n})}};a.propTypes={filter:c.object.isRequired,onFilterChange:c.func.isRequired};let i=a;u.registerForLocalization(i);exports.NumericFilter=i;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),c=require("prop-types"),d=require("@progress/kendo-react-inputs"),u=require("@progress/kendo-react-intl"),o=require("../../messages/index.js");function f(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const l=f(g),a=class a extends l.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onFilterChange.call(void 0,{nextFilter:{...this.props.filter,value:e.value}})}}render(){const e=u.provideLocalizationService(this),{min:t,max:n,filter:s,ariaLabel:p=e.toLanguageString(o.filterNumericFilterAriaLabel,o.messages[o.filterNumericFilterAriaLabel])}=this.props;return l.createElement(d.NumericTextBox,{value:typeof s.value=="number"?s.value:null,onChange:this.onChange,ariaLabel:p,min:t,max:n,tabIndex:-1})}};a.propTypes={filter:c.object.isRequired,onFilterChange:c.func.isRequired};let i=a;u.registerForLocalization(i);exports.NumericFilter=i;

package/filter/filters/NumericFilter.mjs

@@ -36,7 +36,8 @@ const t = class t extends i.Component {
         onChange: this.onChange,
         ariaLabel: p,
         min: s,
-        max: l
+        max: l,
+        tabIndex: -1
       }
     );
   }

package/filter/filters/TextFilter.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"),n=require("prop-types"),p=require("@progress/kendo-react-inputs"),l=require("@progress/kendo-react-intl"),o=require("../../messages/index.js");function g(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const c=g(u),a=class a extends c.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onFilterChange.call(void 0,{nextFilter:{...this.props.filter,value:e.value}})}}render(){const e=l.provideLocalizationService(this),{ariaLabel:t=e.toLanguageString(o.filterTextFilterAriaLabel,o.messages[o.filterTextFilterAriaLabel])}=this.props;return c.createElement(p.TextBox,{value:this.props.filter.value||"",onChange:this.onChange,"aria-label":t})}};a.propTypes={filter:n.object.isRequired,onFilterChange:n.func.isRequired,ariaLabel:n.string};let i=a;l.registerForLocalization(i);exports.TextFilter=i;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),i=require("prop-types"),p=require("@progress/kendo-react-inputs"),l=require("@progress/kendo-react-intl"),a=require("../../messages/index.js");function g(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const c=g(u),o=class o extends c.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onFilterChange.call(void 0,{nextFilter:{...this.props.filter,value:e.value}})}}render(){const e=l.provideLocalizationService(this),{ariaLabel:t=e.toLanguageString(a.filterTextFilterAriaLabel,a.messages[a.filterTextFilterAriaLabel])}=this.props;return c.createElement(p.TextBox,{value:this.props.filter.value||"",onChange:this.onChange,"aria-label":t,tabIndex:-1})}};o.propTypes={filter:i.object.isRequired,onFilterChange:i.func.isRequired,ariaLabel:i.string};let n=o;l.registerForLocalization(n);exports.TextFilter=n;

package/filter/filters/TextFilter.mjs

@@ -29,7 +29,8 @@ const i = class i extends o.Component {
       {
         value: this.props.filter.value || "",
         onChange: this.onChange,
-        "aria-label": s
+        "aria-label": s,
+        tabIndex: -1
       }
     );
   }

package/header/FilterRow.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 b=require("react"),h=require("./HeaderThElement.js"),k=require("../navigation/utils.js"),m=require("@progress/kendo-react-intl"),o=require("../messages/index.js"),C=require("@progress/kendo-react-common");function R(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(a,r,i.get?i:{enumerable:!0,get:()=>t[r]})}}return a.default=t,Object.freeze(a)}const s=R(b),c="k-table-row k-filter-row",p=(t,a,r)=>{let i=`${r?"k-grid-header-sticky":""}`;return t.some(l=>l.field===a)&&(i+=" k-sorted"),i},L=function(t){const{columns:a,filter:r,filterChange:i,sort:l=[],ariaRowIndex:d}=t,f=m.useLocalization();return s.createElement("tr",{className:c,"aria-rowindex":d,role:"row"},a.map((e,u)=>{const g=e.locked!==void 0?{left:e.left,right:e.right,borderRightWidth:e.rightBorder?"1px":""}:{},n=e.filterCell||e.filter;return s.createElement(h.HeaderThElement,{columnId:k.getFilterColumnId(e.id),navigatable:e.navigatable,style:g,key:u,ariaColumnIndex:e.ariaColumnIndex,ariaLabel:n?f.toLanguageString(o.filterAriaLabel,o.messages[o.filterAriaLabel]):void 0,className:C.classNames("k-table-th k-header",p(l,e.field,e.locked))},n&&s.createElement(n,{field:e.field,filter:r,onFilterChange:i}))}))};exports.FILTER_ROW_CLASS=c;exports.FilterRow=L;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),k=require("./HeaderThElement.js"),m=require("../navigation/utils.js"),C=require("@progress/kendo-react-intl"),c=require("../messages/index.js"),R=require("@progress/kendo-react-common");function p(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(i,r,a.get?a:{enumerable:!0,get:()=>t[r]})}}return i.default=t,Object.freeze(i)}const d=p(h),f="k-table-row k-filter-row",w=(t,i,r)=>{let a=`${r?"k-grid-header-sticky":""}`;return t.some(n=>n.field===i)&&(a+=" k-sorted"),a},F=function(t){const{columns:i,filter:r,filterChange:a,sort:n=[],ariaRowIndex:u}=t,g=C.useLocalization(),b=e=>{if(!a)return;const o=e.filter.filter(l=>!(l.operator==="eq"&&l.value===null));a({...e,filter:o})};return d.createElement("tr",{className:f,"aria-rowindex":u,role:"row"},i.map((e,o)=>{const l=e.locked!==void 0?{left:e.left,right:e.right,borderRightWidth:e.rightBorder?"1px":""}:{},s=e.filterCell||e.filter;return d.createElement(k.HeaderThElement,{columnId:m.getFilterColumnId(e.id),navigatable:e.navigatable,style:l,key:o,ariaColumnIndex:e.ariaColumnIndex,ariaLabel:s?g.toLanguageString(c.filterAriaLabel,c.messages[c.filterAriaLabel]):void 0,className:R.classNames("k-table-th k-header",w(n,e.field,e.locked))},s&&d.createElement(s,{field:e.field,filter:r,onFilterChange:b}))}))};exports.FILTER_ROW_CLASS=f;exports.FilterRow=F;

package/header/FilterRow.mjs

@@ -6,49 +6,56 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as s from "react";
-import { HeaderThElement as h } from "./HeaderThElement.mjs";
-import { getFilterColumnId as c } from "../navigation/utils.mjs";
+import * as d from "react";
+import { HeaderThElement as c } from "./HeaderThElement.mjs";
+import { getFilterColumnId as C } from "../navigation/utils.mjs";
 import { useLocalization as k } from "@progress/kendo-react-intl";
-import { filterAriaLabel as d, messages as C } from "../messages/index.mjs";
-import { classNames as p } from "@progress/kendo-react-common";
-const b = "k-table-row k-filter-row", w = (r, a, i) => {
-  let t = `${i ? "k-grid-header-sticky" : ""}`;
-  return r.some((l) => l.field === a) && (t += " k-sorted"), t;
-}, F = function(r) {
-  const { columns: a, filter: i, filterChange: t, sort: l = [], ariaRowIndex: n } = r, f = k();
-  return /* @__PURE__ */ s.createElement("tr", { className: b, "aria-rowindex": n, role: "row" }, a.map((e, m) => {
-    const g = e.locked !== void 0 ? {
+import { filterAriaLabel as f, messages as p } from "../messages/index.mjs";
+import { classNames as b } from "@progress/kendo-react-common";
+const w = "k-table-row k-filter-row", F = (i, a, l) => {
+  let r = `${l ? "k-grid-header-sticky" : ""}`;
+  return i.some((o) => o.field === a) && (r += " k-sorted"), r;
+}, E = function(i) {
+  const { columns: a, filter: l, filterChange: r, sort: o = [], ariaRowIndex: m } = i, g = k(), h = (e) => {
+    if (!r)
+      return;
+    const s = e.filter.filter(
+      (t) => !(t.operator === "eq" && t.value === null)
+    );
+    r({ ...e, filter: s });
+  };
+  return /* @__PURE__ */ d.createElement("tr", { className: w, "aria-rowindex": m, role: "row" }, a.map((e, s) => {
+    const t = e.locked !== void 0 ? {
       left: e.left,
       right: e.right,
       borderRightWidth: e.rightBorder ? "1px" : ""
-    } : {}, o = e.filterCell || e.filter;
-    return /* @__PURE__ */ s.createElement(
-      h,
+    } : {}, n = e.filterCell || e.filter;
+    return /* @__PURE__ */ d.createElement(
+      c,
       {
-        columnId: c(e.id),
+        columnId: C(e.id),
         navigatable: e.navigatable,
-        style: g,
-        key: m,
+        style: t,
+        key: s,
         ariaColumnIndex: e.ariaColumnIndex,
-        ariaLabel: o ? f.toLanguageString(d, C[d]) : void 0,
-        className: p(
+        ariaLabel: n ? g.toLanguageString(f, p[f]) : void 0,
+        className: b(
           "k-table-th k-header",
-          w(l, e.field, e.locked)
+          F(o, e.field, e.locked)
         )
       },
-      o && /* @__PURE__ */ s.createElement(
-        o,
+      n && /* @__PURE__ */ d.createElement(
+        n,
         {
           field: e.field,
-          filter: i,
-          onFilterChange: t
+          filter: l,
+          onFilterChange: h
         }
       )
     );
   }));
 };
 export {
-  b as FILTER_ROW_CLASS,
-  F as FilterRow
+  w as FILTER_ROW_CLASS,
+  E as FilterRow
 };

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 o=require("react"),a=require("./utils/index.js"),i=require("../navigation/constants.js");function c(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const s=c(o);class l extends s.Component{constructor(){super(...arguments),this.element=null}componentDidMount(){const{columnResize:e}=this.props;e&&e.resizable&&e.setIsRtl(a.isRtl(this.element))}render(){return s.createElement("thead",{className:"k-table-thead k-grid-header",role:"presentation",ref:e=>this.element=e,...i.tableKeyboardNavigationHeaderAttributes},this.props.headerRow,this.props.filterRow)}}exports.Header=l;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),a=require("./utils/index.js"),i=require("../navigation/constants.js"),c=require("@progress/kendo-react-common");function l(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const s=l(o);class u extends s.Component{constructor(){super(...arguments),this.element=null}componentDidMount(){const{columnResize:e}=this.props;e&&e.resizable&&e.setIsRtl(a.isRtl(this.element))}render(){return s.createElement("thead",{className:c.classNames("k-table-thead k-grid-header",{"k-grid-draggable-header":this.props.reorderable}),role:"presentation",ref:e=>this.element=e,...i.tableKeyboardNavigationHeaderAttributes},this.props.headerRow,this.props.filterRow)}}exports.Header=u;

package/header/Header.mjs

@@ -9,7 +9,8 @@
 import * as t from "react";
 import { isRtl as r } from "./utils/index.mjs";
 import { tableKeyboardNavigationHeaderAttributes as s } from "../navigation/constants.mjs";
-class a extends t.Component {
+import { classNames as o } from "@progress/kendo-react-common";
+class m extends t.Component {
   constructor() {
     super(...arguments), this.element = null;
   }
@@ -21,7 +22,10 @@ class a extends t.Component {
     return /* @__PURE__ */ t.createElement(
       "thead",
       {
-        className: "k-table-thead k-grid-header",
+        className: o(
+          "k-table-thead k-grid-header",
+          { "k-grid-draggable-header": this.props.reorderable }
+        ),
         role: "presentation",
         ref: (e) => this.element = e,
         ...s
@@ -32,5 +36,5 @@ class a extends t.Component {
   }
 }
 export {
-  a as Header
+  m as Header
 };

package/header/HeaderThElement.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 b=require("react"),m=require("../navigation/hooks.js");function f(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const g=f(b),n=e=>{const{ariaSort:a,colSpan:t,rowSpan:r,columnId:o,navigatable:i,ariaColumnIndex:c,ariaLabel:l,ariaSelected:s,ariaDescription:p,...u}=e,d=m.useTableKeyboardNavigation(o,i);return g.createElement("th",{"aria-sort":a,"aria-label":l,"aria-colindex":c,"aria-selected":s,colSpan:t,rowSpan:r,...d,...u},e.children)};n.displayName="KendoReactHeaderThElement";exports.HeaderThElement=n;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),g=require("../navigation/hooks.js"),p=require("@progress/kendo-react-common");function S(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const i=S(m),c=e=>{const{ariaSort:a,colSpan:t,rowSpan:r,columnId:l,navigatable:n,ariaColumnIndex:s,ariaLabel:u,ariaSelected:d,ariaDescription:h,...b}=e,f=g.useTableKeyboardNavigation(l,n),o=i.useRef(null);return i.useEffect(()=>{o.current&&n&&p.disableNavigatableContainer(o.current)},[n]),i.createElement("th",{ref:o,"aria-sort":a,"aria-label":u,"aria-colindex":s,"aria-selected":d,colSpan:t,rowSpan:r,...f,...b},e.children)};c.displayName="KendoReactHeaderThElement";exports.HeaderThElement=c;

package/header/HeaderThElement.mjs

@@ -6,37 +6,41 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as m from "react";
-import { useTableKeyboardNavigation as b } from "../navigation/hooks.mjs";
-const u = (a) => {
+import * as t from "react";
+import { useTableKeyboardNavigation as f } from "../navigation/hooks.mjs";
+import { disableNavigatableContainer as b } from "@progress/kendo-react-common";
+const p = (r) => {
   const {
-    ariaSort: e,
-    colSpan: t,
-    rowSpan: r,
-    columnId: i,
-    navigatable: n,
-    ariaColumnIndex: o,
-    ariaLabel: l,
-    ariaSelected: c,
+    ariaSort: i,
+    colSpan: n,
+    rowSpan: o,
+    columnId: l,
+    navigatable: e,
+    ariaColumnIndex: c,
+    ariaLabel: s,
+    ariaSelected: m,
     ariaDescription: h,
     ...d
-  } = a, s = b(i, n);
-  return /* @__PURE__ */ m.createElement(
+  } = r, u = f(l, e), a = t.useRef(null);
+  return t.useEffect(() => {
+    a.current && e && b(a.current);
+  }, [e]), /* @__PURE__ */ t.createElement(
     "th",
     {
-      "aria-sort": e,
-      "aria-label": l,
-      "aria-colindex": o,
-      "aria-selected": c,
-      colSpan: t,
-      rowSpan: r,
-      ...s,
+      ref: a,
+      "aria-sort": i,
+      "aria-label": s,
+      "aria-colindex": c,
+      "aria-selected": m,
+      colSpan: n,
+      rowSpan: o,
+      ...u,
       ...d
     },
-    a.children
+    r.children
   );
 };
-u.displayName = "KendoReactHeaderThElement";
+p.displayName = "KendoReactHeaderThElement";
 export {
-  u as HeaderThElement
+  p as HeaderThElement
 };