@progress/kendo-react-grid 8.1.1 → 8.2.0-develop.10

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/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 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;

package/header/Header.mjs

@@ -61,7 +61,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"
         },

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;
@@ -484,6 +493,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private getArguments;
     private getLeafDataItems;
     private getSlicedLeafDataItems;
+    private handleFocusInEditableRows;
 }
 
 /**
@@ -2346,7 +2356,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;
@@ -484,6 +493,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private getArguments;
     private getLeafDataItems;
     private getSlicedLeafDataItems;
+    private handleFocusInEditableRows;
 }
 
 /**
@@ -2346,7 +2356,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: 1719500599,
+  publishDate: 1720791263,
   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.1.1",
+  "version": "8.2.0-develop.10",
   "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.1.1",
-    "@progress/kendo-react-buttons": "8.1.1",
-    "@progress/kendo-react-common": "8.1.1",
-    "@progress/kendo-react-data-tools": "8.1.1",
-    "@progress/kendo-react-dateinputs": "8.1.1",
-    "@progress/kendo-react-dropdowns": "8.1.1",
-    "@progress/kendo-react-inputs": "8.1.1",
-    "@progress/kendo-react-intl": "8.1.1",
-    "@progress/kendo-react-popup": "8.1.1",
+    "@progress/kendo-react-animation": "8.2.0-develop.10",
+    "@progress/kendo-react-buttons": "8.2.0-develop.10",
+    "@progress/kendo-react-common": "8.2.0-develop.10",
+    "@progress/kendo-react-data-tools": "8.2.0-develop.10",
+    "@progress/kendo-react-dateinputs": "8.2.0-develop.10",
+    "@progress/kendo-react-dropdowns": "8.2.0-develop.10",
+    "@progress/kendo-react-inputs": "8.2.0-develop.10",
+    "@progress/kendo-react-intl": "8.2.0-develop.10",
+    "@progress/kendo-react-popup": "8.2.0-develop.10",
     "@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"