@progress/kendo-react-grid 8.2.0-develop.8 → 8.2.0

package/footer/Footer.mjs

@@ -6,11 +6,11 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import { getScrollbarWidth as s, classNames as r, kendoThemeMaps as o } from "@progress/kendo-react-common";
 import * as t from "react";
-class l extends t.Component {
+import { classNames as s, kendoThemeMaps as r } from "@progress/kendo-react-common";
+class i extends t.Component {
   constructor() {
-    super(...arguments), this.footerWrap = null, this.table = null, this.scrollbarWidth = s();
+    super(...arguments), this.footerWrap = null, this.table = null;
   }
   componentDidMount() {
     this.setState({});
@@ -43,7 +43,7 @@ class l extends t.Component {
             this.footerWrap = e;
           },
           className: "k-grid-footer-wrap",
-          style: this.scrollbarWidth ? {} : { borderWidth: 0 },
+          style: this.props.hasScrollbarWidth ? {} : { borderWidth: 0 },
           role: "presentation"
         },
         /* @__PURE__ */ t.createElement(
@@ -52,11 +52,11 @@ class l extends t.Component {
             ref: (e) => {
               this.table = e;
             },
-            className: r(
+            className: s(
               "k-table k-grid-footer-table",
               {
                 "k-table-md": !this.props.size,
-                [`k-table-${o.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+                [`k-table-${r.sizeMap[this.props.size] || this.props.size}`]: this.props.size
               },
               this.props.className
             ),
@@ -72,5 +72,5 @@ class l extends t.Component {
   }
 }
 export {
-  l as Footer
+  i as Footer
 };

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 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;
+"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 f=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:p=>{this.setFilter(p.value,p.operator,e.field,p.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||this.props.navigatable,style:I,className:T.classNames("k-table-th",this.headerCellClassName(e.field,e.locked)||void 0),role:"columnheader",...E},R=f&&(e.filterCell?n.createElement(e.filterCell,{...f}):n.createElement(S.GridFilterCell,{size:this.props.size,...f})),u=O.resolveCells(this.props.cells,e.cells);if(u&&u.filterCell){const p=u.filterCell;return n.createElement(p,{key:v,...f,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

@@ -66,7 +66,7 @@ class S extends a.Component {
           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,
+          navigatable: e.navigatable || this.props.navigatable,
           style: E,
           className: T("k-table-th", this.headerCellClassName(e.field, e.locked) || void 0),
           role: "columnheader",

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.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;
+"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 c(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=c(i);class n 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",this.props.className,{"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",this.props.className,{"k-grid-draggable-header":this.props.draggable}),...o.tableKeyboardNavigationHeaderAttributes},this.props.headerRow,this.props.filterRow)}}exports.Header=n;

package/header/Header.mjs

@@ -8,7 +8,7 @@
 "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";
+import { isRtl as p, tableKeyboardNavigationHeaderAttributes as l } 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) => {
@@ -18,15 +18,15 @@ 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 a = this.headerWrap.scrollLeft, r = this.props.scrollableDataElement();
+      r && r.scrollLeft !== a && (r.scrollLeft = a);
     };
   }
   get element() {
     return this.props.elemRef.current;
   }
   componentDidMount() {
-    const e = h(this.element);
+    const e = p(this.element);
     this.props.columnResize && this.props.columnResize.setIsRtl(e), this.forceUpdate();
   }
   /**
@@ -50,6 +50,7 @@ class d extends t.Component {
         ref: this.props.elemRef,
         className: s(
           "k-grid-header",
+          this.props.className,
           { "k-grid-draggable-header": this.props.draggable }
         ),
         role: "presentation"
@@ -61,7 +62,7 @@ class d extends t.Component {
             this.headerWrap = e;
           },
           className: "k-grid-header-wrap",
-          style: this.scrollbarWidth ? {} : { borderWidth: 0 },
+          style: this.props.hasScrollbarWidth ? {} : { borderWidth: 0 },
           onScroll: this.onScroll,
           role: "presentation"
         },
@@ -84,7 +85,7 @@ class d extends t.Component {
           /* @__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", { className: "k-table-thead", role: "rowgroup", ...l }, this.props.headerRow, this.props.filterRow)
         )
       )
     ) : /* @__PURE__ */ t.createElement(
@@ -93,9 +94,10 @@ class d extends t.Component {
         role: "presentation",
         className: s(
           "k-table-thead",
+          this.props.className,
           { "k-grid-draggable-header": this.props.draggable }
         ),
-        ...a
+        ...l
       },
       this.props.headerRow,
       this.props.filterRow

package/index.d.mts

@@ -25,6 +25,7 @@ import { HeaderCellBaseProps } from '@progress/kendo-react-data-tools';
 import { HeaderThElementProps } from '@progress/kendo-react-data-tools';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import { NavigatableSettings } from '@progress/kendo-react-data-tools';
 import { PagerProps } from '@progress/kendo-react-data-tools';
 import { PagerTargetEvent } from '@progress/kendo-react-data-tools';
 import PropTypes from 'prop-types';
@@ -318,7 +319,9 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
         onColumnResize: PropTypes.Requireable<(...args: any[]) => any>;
         onColumnReorder: PropTypes.Requireable<(...args: any[]) => any>;
         dataItemKey: PropTypes.Requireable<string>;
-        navigatable: PropTypes.Requireable<boolean>;
+        navigatable: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+            mode: PropTypes.Requireable<string>;
+        }> | null | undefined>>;
         size: PropTypes.Requireable<string>;
     };
     /** @hidden */
@@ -329,7 +332,11 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private _columnsMutations;
     private _resized;
     private _focusFirst;
+    private _newEditableRow?;
+    private _singleEditRow?;
+    private _lastActiveElement?;
     private _shouldUpdateLeftRight;
+    private _scrollbarWidth?;
     private contextStateRef;
     private navigationStateRef;
     private _data;
@@ -395,6 +402,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private isRtl;
     private rowIndex;
     private headTable;
+    private rowsInEdit;
     private get _header();
     private get _gridId();
     private observer;
@@ -442,6 +450,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private getVirtualScroll;
     private isAllData;
     private initializeVirtualization;
+    private getCachedScrollbarWidth;
     private scrollHandler;
     private onKeyDown;
     private onFocus;
@@ -475,7 +484,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private childrenToArray;
     private readColumns;
     private mapColumns;
-    private filterHiddenColumns;
+    private filterColumnsByMediaProp;
     private initColumns;
     private configureColumns;
     private getHeaderRow;
@@ -484,6 +493,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private getArguments;
     private getLeafDataItems;
     private getSlicedLeafDataItems;
+    private handleFocusInEditableRows;
 }
 
 /**
@@ -491,6 +501,12 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
  */
 export declare const GridColumn: React_2.FunctionComponent<GridColumnProps>;
 
+/**
+ * The type of elements that the children property of the Grid accepts.
+ */
+export declare interface GridColumnChildrenProps extends GridColumnProps, ReactElement<GridColumnProps> {
+}
+
 /**
  * @hidden
  */
@@ -785,7 +801,7 @@ export declare class GridColumnMenuFilter extends React_2.Component<GridColumnMe
  */
 declare interface GridColumnMenuFilterBaseProps extends GridColumnMenuBaseProps {
     /**
-     * The current filter state of the Grid.It takes value of type [CompositeFilterDescriptor]({% api_kendo-data-query_compositefilterdescriptor %})
+     * The current filter state of the Grid.It takes value of type [CompositeFilterDescriptor]({% slug api_kendo-data-query_compositefilterdescriptor %})
      */
     filter?: CompositeFilterDescriptor;
     /**
@@ -1225,7 +1241,7 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
     /**
      * A collection of child columns.
      */
-    children?: GridColumnProps[] | ReactElement<GridColumnProps>[];
+    children?: GridColumnProps[] | ReactElement<GridColumnProps>[] | GridColumnChildrenProps[];
     /**
      * Specifies a React element that will be cloned and rendered inside the column menu of the Grid ([see example]({% slug column_menu_grid %}#toc-basic-usage)).
      */
@@ -1478,7 +1494,7 @@ export declare interface GridCustomFooterCellProps extends GridFooterCellProps {
  */
 export declare interface GridCustomHeaderCellProps extends GridHeaderCellProps {
     /**
-     * The props and attributes that are applied to the `th` element by default. The property should be used with the [HeaderThElement](slug:) component as demonstrated in [this example](slug:cells_grid#toc-group-header-group-footer-header-cell-footer-cell-filter-cell-and-data-cell).
+     * The props and attributes that are applied to the `th` element by default. The property should be used with the [HeaderThElement](slug:api_data-tools_headerthelement) component as demonstrated in [this example](slug:cells_grid#toc-group-header-group-footer-header-cell-footer-cell-filter-cell-and-data-cell).
      */
     thProps?: GridThAttributes | null;
     /**
@@ -1496,7 +1512,7 @@ export declare interface GridCustomHeaderCellProps extends GridHeaderCellProps {
  */
 export declare interface GridDataStateChangeEvent extends GridEvent {
     /**
-     * The [State]({% api_kendo-data-query_state %}) of the Grid based on the user action.
+     * The [State]({% slug api_kendo-data-query_state %}) of the Grid based on the user action.
      */
     dataState: State;
     targetEvent?: PagerTargetEvent;
@@ -1683,7 +1699,7 @@ export declare interface GridFilterCellProps {
  */
 export declare interface GridFilterChangeEvent extends GridEvent {
     /**
-     * The new [CompositeFilterDescriptor]({% api_kendo-data-query_compositefilterdescriptor %}) based on the user action.
+     * The new [CompositeFilterDescriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) based on the user action.
      */
     filter: CompositeFilterDescriptor;
 }
@@ -2158,7 +2174,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     filterable?: boolean;
     /**
-     * The [descriptor]({% api_kendo-data-query_compositefilterdescriptor %}) by which the data is filtered ([more information and examples]({% slug filtering_grid %})). This affects the values and buttons in the `FilterRow` of the Grid.
+     * The [descriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) by which the data is filtered ([more information and examples]({% slug filtering_grid %})). This affects the values and buttons in the `FilterRow` of the Grid.
      */
     filter?: CompositeFilterDescriptor;
     /**
@@ -2334,6 +2350,10 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * Fires when a header cell is about to be rendered. Overrides the default appearance of the header cell.
      */
     headerCellRender?: (defaultRendering: React.ReactNode | null, props: GridHeaderCellProps) => React.ReactNode;
+    /**
+     * @hidden
+     */
+    headerClassName?: string;
     /**
      * Fires when Grid is scrolled.
      */
@@ -2346,7 +2366,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
      * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
      */
-    navigatable?: boolean;
+    navigatable?: boolean | NavigatableSettings;
     /**
      * Fires when Grid keyboard navigation position is changed.
      */

package/index.d.ts

@@ -25,6 +25,7 @@ import { HeaderCellBaseProps } from '@progress/kendo-react-data-tools';
 import { HeaderThElementProps } from '@progress/kendo-react-data-tools';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import { NavigatableSettings } from '@progress/kendo-react-data-tools';
 import { PagerProps } from '@progress/kendo-react-data-tools';
 import { PagerTargetEvent } from '@progress/kendo-react-data-tools';
 import PropTypes from 'prop-types';
@@ -318,7 +319,9 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
         onColumnResize: PropTypes.Requireable<(...args: any[]) => any>;
         onColumnReorder: PropTypes.Requireable<(...args: any[]) => any>;
         dataItemKey: PropTypes.Requireable<string>;
-        navigatable: PropTypes.Requireable<boolean>;
+        navigatable: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+            mode: PropTypes.Requireable<string>;
+        }> | null | undefined>>;
         size: PropTypes.Requireable<string>;
     };
     /** @hidden */
@@ -329,7 +332,11 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private _columnsMutations;
     private _resized;
     private _focusFirst;
+    private _newEditableRow?;
+    private _singleEditRow?;
+    private _lastActiveElement?;
     private _shouldUpdateLeftRight;
+    private _scrollbarWidth?;
     private contextStateRef;
     private navigationStateRef;
     private _data;
@@ -395,6 +402,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private isRtl;
     private rowIndex;
     private headTable;
+    private rowsInEdit;
     private get _header();
     private get _gridId();
     private observer;
@@ -442,6 +450,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private getVirtualScroll;
     private isAllData;
     private initializeVirtualization;
+    private getCachedScrollbarWidth;
     private scrollHandler;
     private onKeyDown;
     private onFocus;
@@ -475,7 +484,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private childrenToArray;
     private readColumns;
     private mapColumns;
-    private filterHiddenColumns;
+    private filterColumnsByMediaProp;
     private initColumns;
     private configureColumns;
     private getHeaderRow;
@@ -484,6 +493,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private getArguments;
     private getLeafDataItems;
     private getSlicedLeafDataItems;
+    private handleFocusInEditableRows;
 }
 
 /**
@@ -491,6 +501,12 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
  */
 export declare const GridColumn: React_2.FunctionComponent<GridColumnProps>;
 
+/**
+ * The type of elements that the children property of the Grid accepts.
+ */
+export declare interface GridColumnChildrenProps extends GridColumnProps, ReactElement<GridColumnProps> {
+}
+
 /**
  * @hidden
  */
@@ -785,7 +801,7 @@ export declare class GridColumnMenuFilter extends React_2.Component<GridColumnMe
  */
 declare interface GridColumnMenuFilterBaseProps extends GridColumnMenuBaseProps {
     /**
-     * The current filter state of the Grid.It takes value of type [CompositeFilterDescriptor]({% api_kendo-data-query_compositefilterdescriptor %})
+     * The current filter state of the Grid.It takes value of type [CompositeFilterDescriptor]({% slug api_kendo-data-query_compositefilterdescriptor %})
      */
     filter?: CompositeFilterDescriptor;
     /**
@@ -1225,7 +1241,7 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
     /**
      * A collection of child columns.
      */
-    children?: GridColumnProps[] | ReactElement<GridColumnProps>[];
+    children?: GridColumnProps[] | ReactElement<GridColumnProps>[] | GridColumnChildrenProps[];
     /**
      * Specifies a React element that will be cloned and rendered inside the column menu of the Grid ([see example]({% slug column_menu_grid %}#toc-basic-usage)).
      */
@@ -1478,7 +1494,7 @@ export declare interface GridCustomFooterCellProps extends GridFooterCellProps {
  */
 export declare interface GridCustomHeaderCellProps extends GridHeaderCellProps {
     /**
-     * The props and attributes that are applied to the `th` element by default. The property should be used with the [HeaderThElement](slug:) component as demonstrated in [this example](slug:cells_grid#toc-group-header-group-footer-header-cell-footer-cell-filter-cell-and-data-cell).
+     * The props and attributes that are applied to the `th` element by default. The property should be used with the [HeaderThElement](slug:api_data-tools_headerthelement) component as demonstrated in [this example](slug:cells_grid#toc-group-header-group-footer-header-cell-footer-cell-filter-cell-and-data-cell).
      */
     thProps?: GridThAttributes | null;
     /**
@@ -1496,7 +1512,7 @@ export declare interface GridCustomHeaderCellProps extends GridHeaderCellProps {
  */
 export declare interface GridDataStateChangeEvent extends GridEvent {
     /**
-     * The [State]({% api_kendo-data-query_state %}) of the Grid based on the user action.
+     * The [State]({% slug api_kendo-data-query_state %}) of the Grid based on the user action.
      */
     dataState: State;
     targetEvent?: PagerTargetEvent;
@@ -1683,7 +1699,7 @@ export declare interface GridFilterCellProps {
  */
 export declare interface GridFilterChangeEvent extends GridEvent {
     /**
-     * The new [CompositeFilterDescriptor]({% api_kendo-data-query_compositefilterdescriptor %}) based on the user action.
+     * The new [CompositeFilterDescriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) based on the user action.
      */
     filter: CompositeFilterDescriptor;
 }
@@ -2158,7 +2174,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     filterable?: boolean;
     /**
-     * The [descriptor]({% api_kendo-data-query_compositefilterdescriptor %}) by which the data is filtered ([more information and examples]({% slug filtering_grid %})). This affects the values and buttons in the `FilterRow` of the Grid.
+     * The [descriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) by which the data is filtered ([more information and examples]({% slug filtering_grid %})). This affects the values and buttons in the `FilterRow` of the Grid.
      */
     filter?: CompositeFilterDescriptor;
     /**
@@ -2334,6 +2350,10 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * Fires when a header cell is about to be rendered. Overrides the default appearance of the header cell.
      */
     headerCellRender?: (defaultRendering: React.ReactNode | null, props: GridHeaderCellProps) => React.ReactNode;
+    /**
+     * @hidden
+     */
+    headerClassName?: string;
     /**
      * Fires when Grid is scrolled.
      */
@@ -2346,7 +2366,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
      * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
      */
-    navigatable?: boolean;
+    navigatable?: boolean | NavigatableSettings;
     /**
      * Fires when Grid keyboard navigation position is changed.
      */

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-grid",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1720767287,
+  publishDate: 1722844128,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-grid",
-  "version": "8.2.0-develop.8",
+  "version": "8.2.0",
   "description": "React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,15 +25,15 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.20.1",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "8.2.0-develop.8",
-    "@progress/kendo-react-buttons": "8.2.0-develop.8",
-    "@progress/kendo-react-common": "8.2.0-develop.8",
-    "@progress/kendo-react-data-tools": "8.2.0-develop.8",
-    "@progress/kendo-react-dateinputs": "8.2.0-develop.8",
-    "@progress/kendo-react-dropdowns": "8.2.0-develop.8",
-    "@progress/kendo-react-inputs": "8.2.0-develop.8",
-    "@progress/kendo-react-intl": "8.2.0-develop.8",
-    "@progress/kendo-react-popup": "8.2.0-develop.8",
+    "@progress/kendo-react-animation": "8.2.0",
+    "@progress/kendo-react-buttons": "8.2.0",
+    "@progress/kendo-react-common": "8.2.0",
+    "@progress/kendo-react-data-tools": "8.2.0",
+    "@progress/kendo-react-dateinputs": "8.2.0",
+    "@progress/kendo-react-dropdowns": "8.2.0",
+    "@progress/kendo-react-inputs": "8.2.0",
+    "@progress/kendo-react-intl": "8.2.0",
+    "@progress/kendo-react-popup": "8.2.0",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/utils/index.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("../GridColumn.js"),x=require("@progress/kendo-react-data-tools");function f(e,t){const a=(e||"").split(".");let o=t;return a.forEach(i=>{o=o?o[i]:void 0}),o}function g(e,t,a,o,i,s,n=0){let d=n;for(let r=0;r<t.length;r++){if(!i||t[r].value===void 0||t[r].items===void 0){e[e.length]={dataIndex:o.index,dataItem:t[r],rowType:"data",level:n,expanded:s===void 0||f(s,t[r])},o.index++;continue}d=Math.max(d,n+1);const l=s===void 0||f(s,t[r])===void 0||f(s,t[r]);e[e.length]={dataIndex:-1,dataItem:t[r],level:n,rowType:"groupHeader",expanded:l},l&&(d=Math.max(g(e,t[r].items,a,o,i,s,n+1),d)),(a==="always"||l&&a==="visible")&&(e[e.length]={dataIndex:-1,dataItem:t[r],rowType:"groupFooter",level:n,expanded:l})}return d}function u(e,t,a,o=0){let i=[];if(!e)return[];e&&e.length===void 0&&(e=[e]),e.forEach((n,d)=>{n=n.props?n.props:n;const r=t[d]||null,l=u(n.children,r&&r.children||[],a,o+1);i.push(Object.assign({depth:o},c.gridDefaultProps,l.length?{cell:()=>null,filterCell:()=>null}:{},r?{width:r.width,orderIndex:r.orderIndex}:{},n,{id:n.id?n.id:x.tableKeyboardNavigationTools.generateNavigatableId(`${a.prevId++}`,a.idPrefix,"column"),declarationIndex:i.length,children:l,rowSpan:0,colSpan:0,isAccessible:!0,left:r&&Math.floor(r.left),right:r&&Math.floor(r.right)}))});const s=(n,d)=>n.orderIndex===d.orderIndex?n.declarationIndex-d.declarationIndex:(n.orderIndex||0)-(d.orderIndex||0);if(i.sort(s),o===0){let n=[];const d=(r,l)=>r.forEach(h=>{h.parentIndex=l,d(h.children,n.push(h)-1)});return d(i,-1),n}return i}function p(e,t,a,o){let i=[];Array.isArray(e)?i=e:e&&(i=e.data);const s=[];if(i.length>0){let n=i[0];if(t)for(let r=0;r<t.length;r++)n=n.items&&n.items[0];Object.getOwnPropertyNames(n).forEach(r=>{r!==a&&s.push(Object.assign({id:x.tableKeyboardNavigationTools.generateNavigatableId(`${o.prevId++}`,o.idPrefix,"column"),declarationIndex:-1,parentIndex:-1,depth:0,colSpan:0,rowSpan:0,index:0,left:0,right:0,rightBorder:!1,children:[],ariaColumnIndex:0,isAccessible:!0},c.gridDefaultProps,{field:r}))})}return s}const v=(e,t)=>{let a=e[t.parentIndex];for(;a;){if(a.footerCell)return!0;a=e[a.parentIndex]}return!1},w=e=>e.filter(t=>v(e,t)?!1:!!t.footerCell||!(t.children&&t.children.length>0)),y=e=>e.width!==void 0?Math.floor(parseFloat(e.width.toString()))+"px":void 0,I=e=>(e.sort((t,a)=>t.declarationIndex-a.declarationIndex),e.map(t=>{const{declarationIndex:a,parentIndex:o,depth:i,colSpan:s,rowSpan:n,index:d,kFirst:r,children:l,...h}=t;return l.length?{children:I(l),...h}:h})),b=typeof window!="undefined"&&/Firefox/.test(window.navigator.userAgent),S=17895697,M=(e,t)=>{if(!(!e&&!t))return t?e?{...e,...t,select:{...e.select||{},...t.select||{}},hierarchy:{...e.hierarchy||{},...t.hierarchy||{}},group:{...e.group||{},...t.group||{}},edit:{...e.edit||{},...t.edit||{}}}:t:e};exports.autoGenerateColumns=p;exports.firefox=b;exports.firefoxMaxHeight=S;exports.flatData=g;exports.footerColumns=w;exports.getColumnWidth=y;exports.getNestedValue=f;exports.readColumns=u;exports.resolveCells=M;exports.sanitizeColumns=I;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("../GridColumn.js"),g=require("@progress/kendo-react-data-tools");function f(e,r){const a=(e||"").split(".");let o=r;return a.forEach(d=>{o=o?o[d]:void 0}),o}function u(e,r,a,o,d,l,s=0){let t=s;for(let n=0;n<r.length;n++){if(!d||r[n].value===void 0||r[n].items===void 0){e[e.length]={dataIndex:o.index,dataItem:r[n],rowType:"data",level:s,expanded:l===void 0||f(l,r[n])},o.index++;continue}t=Math.max(t,s+1);const i=l===void 0||f(l,r[n])===void 0||f(l,r[n]);e[e.length]={dataIndex:-1,dataItem:r[n],level:s,rowType:"groupHeader",expanded:i},i&&(t=Math.max(u(e,r[n].items,a,o,d,l,s+1),t)),(a==="always"||i&&a==="visible")&&(e[e.length]={dataIndex:-1,dataItem:r[n],rowType:"groupFooter",level:s,expanded:i})}return t}function p(e,r,a,o=0){let d=[];if(!e)return[];e&&e.length===void 0&&(e=[e]),e.filter(t=>t&&t.props?!t.props.hidden:!t.hidden).forEach((t,n)=>{t=t.props?t.props:t;const i=r[n]||null,h=p(t.children,i&&i.children||[],a,o+1);d.push(Object.assign({depth:o},x.gridDefaultProps,h.length?{cell:()=>null,filterCell:()=>null}:{},i?{width:i.width,orderIndex:i.orderIndex}:{},t,{id:t.id?t.id:g.tableKeyboardNavigationTools.generateNavigatableId(`${a.prevId++}`,a.idPrefix,"column"),declarationIndex:d.length,children:h,rowSpan:0,colSpan:0,isAccessible:!0,left:i&&Math.floor(i.left),right:i&&Math.floor(i.right)}))});const s=(t,n)=>t.orderIndex===n.orderIndex?t.declarationIndex-n.declarationIndex:(t.orderIndex||0)-(n.orderIndex||0);if(d.sort(s),o===0){let t=[];const n=(i,h)=>i.forEach(c=>{c.parentIndex=h,n(c.children,t.push(c)-1)});return n(d,-1),t}return d}function v(e,r,a,o){let d=[];Array.isArray(e)?d=e:e&&(d=e.data);const l=[];if(d.length>0){let s=d[0];if(r)for(let n=0;n<r.length;n++)s=s.items&&s.items[0];Object.getOwnPropertyNames(s).forEach(n=>{n!==a&&l.push(Object.assign({id:g.tableKeyboardNavigationTools.generateNavigatableId(`${o.prevId++}`,o.idPrefix,"column"),declarationIndex:-1,parentIndex:-1,depth:0,colSpan:0,rowSpan:0,index:0,left:0,right:0,rightBorder:!1,children:[],ariaColumnIndex:0,isAccessible:!0},x.gridDefaultProps,{field:n}))})}return l}const w=(e,r)=>{let a=e[r.parentIndex];for(;a;){if(a.footerCell)return!0;a=e[a.parentIndex]}return!1},y=e=>e.filter(r=>w(e,r)?!1:!!r.footerCell||!(r.children&&r.children.length>0)),b=e=>e.width!==void 0?Math.floor(parseFloat(e.width.toString()))+"px":void 0,I=e=>(e.sort((r,a)=>r.declarationIndex-a.declarationIndex),e.map(r=>{const{declarationIndex:a,parentIndex:o,depth:d,colSpan:l,rowSpan:s,index:t,kFirst:n,children:i,...h}=r;return i.length?{children:I(i),...h}:h})),m=typeof window!="undefined"&&/Firefox/.test(window.navigator.userAgent),S=17895697,C=(e,r)=>{if(!(!e&&!r))return r?e?{...e,...r,select:{...e.select||{},...r.select||{}},hierarchy:{...e.hierarchy||{},...r.hierarchy||{}},group:{...e.group||{},...r.group||{}},edit:{...e.edit||{},...r.edit||{}}}:r:e};exports.autoGenerateColumns=v;exports.firefox=m;exports.firefoxMaxHeight=S;exports.flatData=u;exports.footerColumns=y;exports.getColumnWidth=b;exports.getNestedValue=f;exports.readColumns=p;exports.resolveCells=C;exports.sanitizeColumns=I;