@progress/kendo-react-data-tools 7.5.0-develop.2 → 7.5.0-develop.21

package/index.d.ts

@@ -94,9 +94,6 @@ export declare interface BooleanFilterProps extends TextFilterProps {
     defaultItem?: any;
 }
 
-/**
- * @hidden
- */
 export declare interface CellProps {
     /**
      * @hidden
@@ -199,11 +196,11 @@ export declare interface ClipboardDataEvent {
      */
     type: ClipboardActionType;
     /**
-     * Represents the native clipboard event.
+     * Represents the native [ClipboardEvent]({% slug api_grid_gridcellssettings %})
      */
     nativeEvent?: ClipboardEvent;
     /**
-     * All the Grid columns.
+     * All the Grid columns. It takes value of type of [ColumnBaseProps]({% slug api_data-tools_columnbaseprops %})<[CellProps]({% slug api_data-tools_cellprops %})>[]
      */
     columns: ColumnBaseProps[];
     /**
@@ -277,9 +274,6 @@ export declare interface ClipboardSettings {
 /** @hidden */
 export declare const closestTagName: (target: HTMLElement | null, tagName: 'TD' | 'TR' | 'TABLE') => HTMLElement | null;
 
-/**
- * @hidden
- */
 export declare interface ColumnBaseProps<CellProps = CellProps> {
     /**
      * The field to which the column is bound.
@@ -1647,6 +1641,7 @@ export declare class Pager extends React_2.Component<PagerProps, PagerState> {
         messagesMap: PropTypes.Requireable<(...args: any[]) => any>;
         size: PropTypes.Requireable<string | null>;
         dir: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
     };
     /**
      * @hidden
@@ -1656,6 +1651,7 @@ export declare class Pager extends React_2.Component<PagerProps, PagerState> {
         info: boolean;
         type: string;
         size: string;
+        disabled: boolean;
     };
     private _element;
     private get isRtl();
@@ -1769,6 +1765,10 @@ export declare interface PagerProps {
      * By default, navigation is disabled and the Pager content is accessible in the normal tab sequence.
      */
     navigatable?: boolean;
+    /**
+     * Controls the disabled state of the Pager. Defaults to `false`.
+     */
+    disabled?: boolean;
 }
 
 /**
@@ -1990,7 +1990,7 @@ export declare interface TableDragSelectionReleaseEvent {
  */
 export declare const tableKeyboardNavigation: {
     onConstructor: (options: {
-        navigatable: boolean | undefined;
+        navigatable?: boolean | undefined;
         contextStateRef: {
             current?: TableKeyboardNavigationContextType;
         };
@@ -2025,6 +2025,7 @@ export declare const tableKeyboardNavigation: {
         navigationStateRef: {
             current?: TableKeyboardNavigationStateType;
         };
+        focusFirst?: boolean;
     }) => void;
     onFocus: (event: React_2.FocusEvent<HTMLDivElement>, options: {
         contextStateRef: {
@@ -2041,6 +2042,7 @@ export declare const tableKeyboardNavigation: {
         onNavigationAction?: ((options: {
             event: React_2.KeyboardEvent<HTMLElement>;
             focusElement: any;
+            action?: "moveToNextPage" | "moveToPrevPage" | "reorderToLeft" | "reorderToRight" | undefined;
         }) => void) | undefined;
     }) => void;
     generateMatrix: (options: {
@@ -2049,6 +2051,15 @@ export declare const tableKeyboardNavigation: {
             current?: TableKeyboardNavigationStateType;
         };
     }) => void;
+    focusFirstDataElement: (options: {
+        scope?: HTMLElement | undefined;
+        contextStateRef: {
+            current?: TableKeyboardNavigationContextType | undefined;
+        };
+        navigationStateRef: {
+            current?: TableKeyboardNavigationStateType | undefined;
+        };
+    }, event?: any) => void;
 };
 
 /**
@@ -2100,7 +2111,7 @@ export declare interface TableKeyboardNavigationStateType {
  * @hidden
  */
 export declare const tableKeyboardNavigationTools: {
-    generateNavigatableId: (navigationId: string, idPrefix: string, type?: 'column' | 'cell' | 'nodata') => string;
+    generateNavigatableId: (navigationId: string, idPrefix: string, type?: 'column' | 'cell' | 'group' | 'expand' | 'nodata') => string;
     getNavigatableId: (element: Element | null) => string | undefined;
     getNavigatableLevel: (element: Element | null) => number | undefined;
     getNavigatableElement: (scope: HTMLElement, options?: {
@@ -2126,7 +2137,7 @@ export declare const tableKeyboardNavigationTools: {
         contextStateRef: {
             current?: TableKeyboardNavigationContextType;
         };
-        event: any;
+        event?: any;
     }) => void;
     getIdPrefix: (navigationStateRef: {
         current?: TableKeyboardNavigationStateType;
@@ -2153,6 +2164,15 @@ export declare const tableKeyboardNavigationTools: {
         current?: TableKeyboardNavigationStateType;
     }) => number;
     getFilterColumnId: (columnId: string) => string;
+    focusFirstDataElement: (options: {
+        scope?: HTMLElement;
+        contextStateRef: {
+            current?: TableKeyboardNavigationContextType;
+        };
+        navigationStateRef: {
+            current?: TableKeyboardNavigationStateType;
+        };
+    }, event?: any) => void;
 };
 
 /** @hidden */

package/navigation/TableKeyboardNavigation.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("@progress/kendo-react-common"),a=require("./utils.js"),K=e=>{const{navigatable:i,contextStateRef:o,navigationStateRef:t,idPrefix:r}=e;i&&(o.current={activeId:"",level:0},t.current={activeElementIsFocused:!1,prevNavigationIndexes:void 0,idPrefix:r||l.guid(),navigationMatrix:[],lastHeaderIndex:-1})},p=e=>{const{scope:i,contextStateRef:o,navigationStateRef:t}=e;if(o.current&&t.current&&i){E(e);const r=t.current.navigationMatrix.flat().find(n=>n.endsWith("cell"));if(r){const n=a.tableKeyboardNavigationTools.getActiveNavDataElement(i,r);n&&(o.current.activeId=r,n.setAttribute("tabIndex","0"))}}},S=e=>{const{contextStateRef:i,navigationStateRef:o,document:t}=e;if(i.current&&o.current&&t){const r=l.getActiveElement(t),n=a.tableKeyboardNavigationTools.getNavigatableId(r);n&&n===i.current.activeId&&(o.current.activeElementIsFocused=!0)}},T=e=>{const{scope:i,contextStateRef:o,navigationStateRef:t}=e;if(E(e),o.current&&t.current&&i){if(!a.tableKeyboardNavigationTools.getActiveNavDataElement(i,o.current.activeId)){const n=t.current.navigationMatrix[0][0],c=a.tableKeyboardNavigationTools.getActiveNavDataElement(i,n);n&&c&&(o.current.activeId=n,c.setAttribute("tabIndex","0"),t.current.activeElementIsFocused&&c.focus())}t.current.activeElementIsFocused=!1}},C=(e,i)=>{const{contextStateRef:o}=i;if(e.isDefaultPrevented()||!o.current)return;const t=e.target,r=a.tableKeyboardNavigationTools.getNavigatableId(t);if(r&&r!==o.current.activeId){const n=a.tableKeyboardNavigationTools.getClosestScope(t);if(!n)return;const c=a.tableKeyboardNavigationTools.getActiveNavDataElement(n,o.current.activeId);c&&c.setAttribute("tabIndex","-1"),t.setAttribute("tabIndex","0"),o.current.activeId=r}},h=(e,i)=>{const{contextStateRef:o,navigationStateRef:t,onNavigationAction:r}=i;if(e.isDefaultPrevented()||!o.current||!t.current)return;if(e.keyCode===l.Keys.esc){const d=a.tableKeyboardNavigationTools.getClosestNavigatableElement(e.target);a.tableKeyboardNavigationTools.focusElement({elementForFocus:d,event:e,contextStateRef:o});return}const n=e.target,c=n.className.indexOf("k-checkbox")===-1?n:a.tableKeyboardNavigationTools.getClosestNavigatableElement(n),g=a.tableKeyboardNavigationTools.getNavigatableId(c),b=a.tableKeyboardNavigationTools.getNavigatableLevel(c),m=a.tableKeyboardNavigationTools.getClosestScope(c),f=t.current.navigationMatrix;if(b!==void 0&&m){if(e.keyCode===l.Keys.enter){const d=a.tableKeyboardNavigationTools.getNavigatableElement(c,{level:b+1});if(d){a.tableKeyboardNavigationTools.focusElement({elementForFocus:d,event:e,contextStateRef:o,prevElement:c});return}else{const I=a.tableKeyboardNavigationTools.getFocusableElements(c)[0];a.tableKeyboardNavigationTools.focusElement({elementForFocus:I,event:e,contextStateRef:o,prevElement:c});return}}if(e.keyCode===l.Keys.up||e.keyCode===l.Keys.down||e.keyCode===l.Keys.left||e.keyCode===l.Keys.right){const d=e.keyCode===l.Keys.up||e.keyCode===l.Keys.left,I=e.keyCode===l.Keys.up||e.keyCode===l.Keys.down;let v;if(t.current&&t.current.prevNavigationIndexes){const[u,s]=t.current.prevNavigationIndexes;f[u][s]===g?v=t.current.prevNavigationIndexes:v=a.findId(f,g)}else v=a.findId(f,g);if(v){const[u,s]=v,[y,N]=I?a.findNextIdByRowIndex(u,s,g,f,d):a.findNextIdByCellIndex(u,s,g,f,d);if(y){const x=a.tableKeyboardNavigationTools.getActiveNavDataElement(m,y);a.tableKeyboardNavigationTools.focusElement({elementForFocus:x,event:e,contextStateRef:o,prevElement:c}),t.current.prevNavigationIndexes=N,r&&r({focusElement:x,event:e})}}}}},E=e=>{const{navigationStateRef:i,scope:o}=e;if(!i.current||!o)return;const t=[],r=a.getHeaderElement(o),n=a.getBodyElement(o);if(!r||!n)return;const c=Array.from(r.children),g=Array.from(n.children);[...c,...g].forEach((b,m)=>{Array.from(b.children).forEach(f=>{const d=a.getNavigatableId(f);if(!d)return;const I=f.rowSpan||1,v=f.colSpan||1;let u;for(let s=m,y=m+I;s<y;s++){if(t[s]||(t[s]=[]),u===void 0){const N=t[s].findIndex(x=>!x);u=N>-1?N:t[s].length}t[s][u]=d||""}for(let s=u+1,y=u+v;s<y;s++)t[m][s]=d||""})}),i.current.navigationMatrix=t.filter(b=>!!b),i.current.lastHeaderIndex=c.length-1},R={onConstructor:K,onComponentDidMount:p,onGetSnapshotBeforeUpdate:S,onComponentDidUpdate:T,onFocus:C,onKeyDown:h,generateMatrix:E};exports.tableKeyboardNavigation=R;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@progress/kendo-react-common"),t=require("./utils.js"),C=e=>{const{navigatable:r,contextStateRef:o,navigationStateRef:a,idPrefix:i}=e;r&&(o.current={activeId:"",level:0},a.current={activeElementIsFocused:!1,prevNavigationIndexes:void 0,idPrefix:i||s.guid(),navigationMatrix:[],lastHeaderIndex:-1})},D=e=>{const{scope:r,contextStateRef:o,navigationStateRef:a}=e;if(o.current&&a.current&&r){I(e);const i=t.getFirstDataCell(a.current.navigationMatrix);if(i){const n=t.tableKeyboardNavigationTools.getActiveNavDataElement(r,i);n&&(o.current.activeId=i,n.setAttribute("tabIndex","0"))}}},T=e=>{const{contextStateRef:r,navigationStateRef:o,document:a}=e;if(r.current&&o.current&&a){const i=s.getActiveElement(a),n=t.tableKeyboardNavigationTools.getNavigatableId(i);n&&n===r.current.activeId&&(o.current.activeElementIsFocused=!0)}},R=e=>{const{scope:r,contextStateRef:o,navigationStateRef:a,focusFirst:i}=e;if(i&&(C(e),D(e),t.focusFirstDataElement(e)),I(e),o.current&&a.current&&r){if(!t.tableKeyboardNavigationTools.getActiveNavDataElement(r,o.current.activeId)){const f=t.getFirstDataCell(a.current.navigationMatrix),c=t.tableKeyboardNavigationTools.getActiveNavDataElement(r,f);f&&c&&(o.current.activeId=f,c.setAttribute("tabIndex","0"),a.current.activeElementIsFocused&&c.focus())}a.current.activeElementIsFocused=!1}},S=(e,r)=>{const{contextStateRef:o}=r;if(e.isDefaultPrevented()||!o.current)return;const a=e.target,i=t.tableKeyboardNavigationTools.getNavigatableId(a);if(i&&i!==o.current.activeId){const n=t.tableKeyboardNavigationTools.getClosestScope(a);if(!n)return;const f=t.tableKeyboardNavigationTools.getActiveNavDataElement(n,o.current.activeId);f&&f.setAttribute("tabIndex","-1"),a.setAttribute("tabIndex","0"),o.current.activeId=i}},h=(e,r)=>{const{contextStateRef:o,navigationStateRef:a,onNavigationAction:i}=r;if(e.isDefaultPrevented()||!o.current||!a.current)return;let n;if(e.keyCode===s.Keys.esc){n=t.tableKeyboardNavigationTools.getClosestNavigatableElement(e.target),t.tableKeyboardNavigationTools.focusElement({elementForFocus:n,event:e,contextStateRef:o});return}const f=e.target,c=f.className.indexOf("k-checkbox")===-1?f:t.tableKeyboardNavigationTools.getClosestNavigatableElement(f),g=t.tableKeyboardNavigationTools.getNavigatableId(c),y=g==null?void 0:g.endsWith("column"),m=t.tableKeyboardNavigationTools.getNavigatableLevel(c),u=t.tableKeyboardNavigationTools.getClosestScope(c),v=a.current.navigationMatrix,N=e.metaKey||e.ctrlKey,b=t.getCurrentIdIndexes(a,v,g);if(m!==void 0&&u){if(e.keyCode===s.Keys.enter){const l=t.tableKeyboardNavigationTools.getNavigatableElement(c,{level:m+1});if(l){t.tableKeyboardNavigationTools.focusElement({elementForFocus:l,event:e,contextStateRef:o,prevElement:c});return}else{n=t.tableKeyboardNavigationTools.getFocusableElements(c)[0],t.tableKeyboardNavigationTools.focusElement({elementForFocus:n,event:e,contextStateRef:o,prevElement:c});return}}if(e.keyCode===s.Keys.home&&b)if(N)t.focusFirstDataElement({scope:u,navigationStateRef:a,contextStateRef:o},e);else{const l=t.getFirstRowDataCell(a.current.navigationMatrix,b[0]);n=t.tableKeyboardNavigationTools.getActiveNavDataElement(u,l),t.tableKeyboardNavigationTools.focusElement({elementForFocus:n,event:e,contextStateRef:o})}if(e.keyCode===s.Keys.end&&b)if(N){const l=t.getLastDataCell(a.current.navigationMatrix);n=t.tableKeyboardNavigationTools.getActiveNavDataElement(u,l),t.tableKeyboardNavigationTools.focusElement({elementForFocus:n,event:e,contextStateRef:o})}else{const l=t.getLastRowDataCell(a.current.navigationMatrix,b[0]);n=t.tableKeyboardNavigationTools.getActiveNavDataElement(u,l),t.tableKeyboardNavigationTools.focusElement({elementForFocus:n,event:e,contextStateRef:o})}if(e.keyCode===s.Keys.up||e.keyCode===s.Keys.down||e.keyCode===s.Keys.left||e.keyCode===s.Keys.right){const l=e.keyCode===s.Keys.up||e.keyCode===s.Keys.left,d=e.keyCode===s.Keys.up||e.keyCode===s.Keys.down;if(b){const[E,K]=b,[x,p]=d?t.findNextIdByRowIndex(E,K,g,v,l):t.findNextIdByCellIndex(E,K,g,v,l);x&&(n=t.tableKeyboardNavigationTools.getActiveNavDataElement(u,x),t.tableKeyboardNavigationTools.focusElement({elementForFocus:n,event:e,contextStateRef:o,prevElement:c}),a.current.prevNavigationIndexes=p)}}if(N&&e.keyCode===s.Keys.left&&y){i&&i({focusElement:c,event:e,action:"reorderToLeft"}),e.preventDefault();return}if(N&&e.keyCode===s.Keys.right&&y){i&&i({focusElement:c,event:e,action:"reorderToRight"}),e.preventDefault();return}if(e.keyCode===s.Keys.pageUp){i&&i({focusElement:n,event:e,action:"moveToNextPage"}),e.preventDefault();return}if(e.keyCode===s.Keys.pageDown){i&&i({focusElement:n,event:e,action:"moveToPrevPage"}),e.preventDefault();return}i&&i({focusElement:n,event:e})}},I=e=>{const{navigationStateRef:r,scope:o}=e;if(!r.current||!o)return;const a=[],i=t.getHeaderElement(o),n=t.getBodyElement(o),f=t.getNoRecordsElement(o)||{children:[]};if(!i||!n)return;const c=Array.from(i.children),g=Array.from(n.children);[...c,...g,f].forEach((y,m)=>{Array.from(y.children).forEach(u=>{const v=t.getNavigatableId(u);if(!v)return;const N=u.rowSpan||1,b=u.colSpan||1;let l;for(let d=m,E=m+N;d<E;d++){if(a[d]||(a[d]=[]),l===void 0){const K=a[d].findIndex(x=>!x);l=K>-1?K:a[d].length}a[d][l]=v||""}for(let d=l+1,E=l+b;d<E;d++)a[m][d]=v||""})}),r.current.navigationMatrix=a.filter(y=>!!y),r.current.lastHeaderIndex=c.length-1},F={onConstructor:C,onComponentDidMount:D,onGetSnapshotBeforeUpdate:T,onComponentDidUpdate:R,onFocus:S,onKeyDown:h,generateMatrix:I,focusFirstDataElement:t.focusFirstDataElement};exports.tableKeyboardNavigation=F;

package/navigation/TableKeyboardNavigation.mjs

@@ -6,140 +6,170 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import { guid as S, getActiveElement as C, Keys as f } from "@progress/kendo-react-common";
-import { tableKeyboardNavigationTools as a, findId as y, findNextIdByRowIndex as h, findNextIdByCellIndex as F, getHeaderElement as R, getBodyElement as A, getNavigatableId as D } from "./utils.mjs";
-const k = (e) => {
-  const { navigatable: o, contextStateRef: n, navigationStateRef: t, idPrefix: c } = e;
-  o && (n.current = {
+import { guid as k, getActiveElement as A, Keys as l } from "@progress/kendo-react-common";
+import { focusFirstDataElement as D, getFirstDataCell as N, tableKeyboardNavigationTools as o, getCurrentIdIndexes as F, getFirstRowDataCell as w, getLastRowDataCell as M, getLastDataCell as P, getHeaderElement as K, getBodyElement as L, getNoRecordsElement as T, getNavigatableId as B, findNextIdByRowIndex as H, findNextIdByCellIndex as U } from "./utils.mjs";
+const R = (e) => {
+  const { navigatable: c, contextStateRef: n, navigationStateRef: t, idPrefix: r } = e;
+  c && (n.current = {
     activeId: "",
     level: 0
   }, t.current = {
     activeElementIsFocused: !1,
     prevNavigationIndexes: void 0,
-    idPrefix: c || S(),
+    idPrefix: r || k(),
     navigationMatrix: [],
     lastHeaderIndex: -1
   });
-}, w = (e) => {
-  const { scope: o, contextStateRef: n, navigationStateRef: t } = e;
-  if (n.current && t.current && o) {
-    N(e);
-    const c = t.current.navigationMatrix.flat().find((r) => r.endsWith("cell"));
-    if (c) {
-      const r = a.getActiveNavDataElement(o, c);
-      r && (n.current.activeId = c, r.setAttribute("tabIndex", "0"));
+}, h = (e) => {
+  const { scope: c, contextStateRef: n, navigationStateRef: t } = e;
+  if (n.current && t.current && c) {
+    b(e);
+    const r = N(t.current.navigationMatrix);
+    if (r) {
+      const a = o.getActiveNavDataElement(c, r);
+      a && (n.current.activeId = r, a.setAttribute("tabIndex", "0"));
     }
   }
-}, M = (e) => {
-  const { contextStateRef: o, navigationStateRef: n, document: t } = e;
-  if (o.current && n.current && t) {
-    const c = C(t), r = a.getNavigatableId(c);
-    r && r === o.current.activeId && (n.current.activeElementIsFocused = !0);
+}, O = (e) => {
+  const { contextStateRef: c, navigationStateRef: n, document: t } = e;
+  if (c.current && n.current && t) {
+    const r = A(t), a = o.getNavigatableId(r);
+    a && a === c.current.activeId && (n.current.activeElementIsFocused = !0);
   }
-}, B = (e) => {
-  const { scope: o, contextStateRef: n, navigationStateRef: t } = e;
-  if (N(e), n.current && t.current && o) {
-    if (!a.getActiveNavDataElement(o, n.current.activeId)) {
-      const r = t.current.navigationMatrix[0][0], i = a.getActiveNavDataElement(o, r);
-      r && i && (n.current.activeId = r, i.setAttribute("tabIndex", "0"), t.current.activeElementIsFocused && i.focus());
+}, G = (e) => {
+  const { scope: c, contextStateRef: n, navigationStateRef: t, focusFirst: r } = e;
+  if (r && (R(e), h(e), D(e)), b(e), n.current && t.current && c) {
+    if (!o.getActiveNavDataElement(c, n.current.activeId)) {
+      const f = N(t.current.navigationMatrix), i = o.getActiveNavDataElement(c, f);
+      f && i && (n.current.activeId = f, i.setAttribute("tabIndex", "0"), t.current.activeElementIsFocused && i.focus());
     }
     t.current.activeElementIsFocused = !1;
   }
-}, K = (e, o) => {
-  const { contextStateRef: n } = o;
+}, V = (e, c) => {
+  const { contextStateRef: n } = c;
   if (e.isDefaultPrevented() || !n.current)
     return;
-  const t = e.target, c = a.getNavigatableId(t);
-  if (c && c !== n.current.activeId) {
-    const r = a.getClosestScope(t);
-    if (!r)
+  const t = e.target, r = o.getNavigatableId(t);
+  if (r && r !== n.current.activeId) {
+    const a = o.getClosestScope(t);
+    if (!a)
       return;
-    const i = a.getActiveNavDataElement(r, n.current.activeId);
-    i && i.setAttribute("tabIndex", "-1"), t.setAttribute("tabIndex", "0"), n.current.activeId = c;
+    const f = o.getActiveNavDataElement(a, n.current.activeId);
+    f && f.setAttribute("tabIndex", "-1"), t.setAttribute("tabIndex", "0"), n.current.activeId = r;
   }
-}, P = (e, o) => {
+}, W = (e, c) => {
   const {
     contextStateRef: n,
     navigationStateRef: t,
-    onNavigationAction: c
-  } = o;
+    onNavigationAction: r
+  } = c;
   if (e.isDefaultPrevented() || !n.current || !t.current)
     return;
-  if (e.keyCode === f.esc) {
-    const l = a.getClosestNavigatableElement(e.target);
-    a.focusElement({ elementForFocus: l, event: e, contextStateRef: n });
+  let a;
+  if (e.keyCode === l.esc) {
+    a = o.getClosestNavigatableElement(e.target), o.focusElement({ elementForFocus: a, event: e, contextStateRef: n });
     return;
   }
-  const r = e.target, i = r.className.indexOf("k-checkbox") === -1 ? r : a.getClosestNavigatableElement(r), v = a.getNavigatableId(i), m = a.getNavigatableLevel(i), I = a.getClosestScope(i), u = t.current.navigationMatrix;
-  if (m !== void 0 && I) {
-    if (e.keyCode === f.enter) {
-      const l = a.getNavigatableElement(i, { level: m + 1 });
-      if (l) {
-        a.focusElement({
-          elementForFocus: l,
+  const f = e.target, i = f.className.indexOf("k-checkbox") === -1 ? f : o.getClosestNavigatableElement(f), g = o.getNavigatableId(i), E = g == null ? void 0 : g.endsWith("column"), x = o.getNavigatableLevel(i), u = o.getClosestScope(i), v = t.current.navigationMatrix, I = e.metaKey || e.ctrlKey, m = F(t, v, g);
+  if (x !== void 0 && u) {
+    if (e.keyCode === l.enter) {
+      const s = o.getNavigatableElement(i, { level: x + 1 });
+      if (s) {
+        o.focusElement({
+          elementForFocus: s,
           event: e,
           contextStateRef: n,
           prevElement: i
         });
         return;
       } else {
-        const E = a.getFocusableElements(i)[0];
-        a.focusElement({ elementForFocus: E, event: e, contextStateRef: n, prevElement: i });
+        a = o.getFocusableElements(i)[0], o.focusElement({ elementForFocus: a, event: e, contextStateRef: n, prevElement: i });
         return;
       }
     }
-    if (e.keyCode === f.up || e.keyCode === f.down || e.keyCode === f.left || e.keyCode === f.right) {
-      const l = e.keyCode === f.up || e.keyCode === f.left, E = e.keyCode === f.up || e.keyCode === f.down;
-      let g;
-      if (t.current && t.current.prevNavigationIndexes) {
-        const [d, s] = t.current.prevNavigationIndexes;
-        u[d][s] === v ? g = t.current.prevNavigationIndexes : g = y(u, v);
-      } else
-        g = y(u, v);
-      if (g) {
-        const [d, s] = g, [x, p] = E ? h(d, s, v, u, l) : F(d, s, v, u, l);
-        if (x) {
-          const b = a.getActiveNavDataElement(I, x);
-          a.focusElement({ elementForFocus: b, event: e, contextStateRef: n, prevElement: i }), t.current.prevNavigationIndexes = p, c && c({ focusElement: b, event: e });
-        }
+    if (e.keyCode === l.home && m)
+      if (I)
+        D(
+          {
+            scope: u,
+            navigationStateRef: t,
+            contextStateRef: n
+          },
+          e
+        );
+      else {
+        const s = w(t.current.navigationMatrix, m[0]);
+        a = o.getActiveNavDataElement(u, s), o.focusElement({ elementForFocus: a, event: e, contextStateRef: n });
+      }
+    if (e.keyCode === l.end && m)
+      if (I) {
+        const s = P(t.current.navigationMatrix);
+        a = o.getActiveNavDataElement(u, s), o.focusElement({ elementForFocus: a, event: e, contextStateRef: n });
+      } else {
+        const s = M(t.current.navigationMatrix, m[0]);
+        a = o.getActiveNavDataElement(u, s), o.focusElement({ elementForFocus: a, event: e, contextStateRef: n });
       }
+    if (e.keyCode === l.up || e.keyCode === l.down || e.keyCode === l.left || e.keyCode === l.right) {
+      const s = e.keyCode === l.up || e.keyCode === l.left, d = e.keyCode === l.up || e.keyCode === l.down;
+      if (m) {
+        const [p, C] = m, [y, S] = d ? H(p, C, g, v, s) : U(p, C, g, v, s);
+        y && (a = o.getActiveNavDataElement(u, y), o.focusElement({ elementForFocus: a, event: e, contextStateRef: n, prevElement: i }), t.current.prevNavigationIndexes = S);
+      }
+    }
+    if (I && e.keyCode === l.left && E) {
+      r && r({ focusElement: i, event: e, action: "reorderToLeft" }), e.preventDefault();
+      return;
+    }
+    if (I && e.keyCode === l.right && E) {
+      r && r({ focusElement: i, event: e, action: "reorderToRight" }), e.preventDefault();
+      return;
+    }
+    if (e.keyCode === l.pageUp) {
+      r && r({ focusElement: a, event: e, action: "moveToNextPage" }), e.preventDefault();
+      return;
+    }
+    if (e.keyCode === l.pageDown) {
+      r && r({ focusElement: a, event: e, action: "moveToPrevPage" }), e.preventDefault();
+      return;
     }
+    r && r({ focusElement: a, event: e });
   }
-}, N = (e) => {
-  const { navigationStateRef: o, scope: n } = e;
-  if (!o.current || !n)
+}, b = (e) => {
+  const { navigationStateRef: c, scope: n } = e;
+  if (!c.current || !n)
     return;
-  const t = [], c = R(n), r = A(n);
-  if (!c || !r)
+  const t = [], r = K(n), a = L(n), f = T(n) || { children: [] };
+  if (!r || !a)
     return;
-  const i = Array.from(c.children), v = Array.from(r.children);
-  [...i, ...v].forEach((m, I) => {
-    Array.from(m.children).forEach((u) => {
-      const l = D(u);
-      if (!l)
+  const i = Array.from(r.children), g = Array.from(a.children);
+  [...i, ...g, f].forEach((E, x) => {
+    Array.from(E.children).forEach((u) => {
+      const v = B(u);
+      if (!v)
         return;
-      const E = u.rowSpan || 1, g = u.colSpan || 1;
-      let d;
-      for (let s = I, x = I + E; s < x; s++) {
-        if (t[s] || (t[s] = []), d === void 0) {
-          const p = t[s].findIndex((b) => !b);
-          d = p > -1 ? p : t[s].length;
+      const I = u.rowSpan || 1, m = u.colSpan || 1;
+      let s;
+      for (let d = x, p = x + I; d < p; d++) {
+        if (t[d] || (t[d] = []), s === void 0) {
+          const C = t[d].findIndex((y) => !y);
+          s = C > -1 ? C : t[d].length;
         }
-        t[s][d] = l || "";
+        t[d][s] = v || "";
       }
-      for (let s = d + 1, x = d + g; s < x; s++)
-        t[I][s] = l || "";
+      for (let d = s + 1, p = s + m; d < p; d++)
+        t[x][d] = v || "";
     });
-  }), o.current.navigationMatrix = t.filter((m) => !!m), o.current.lastHeaderIndex = i.length - 1;
-}, U = {
-  onConstructor: k,
-  onComponentDidMount: w,
-  onGetSnapshotBeforeUpdate: M,
-  onComponentDidUpdate: B,
-  onFocus: K,
-  onKeyDown: P,
-  generateMatrix: N
+  }), c.current.navigationMatrix = t.filter((E) => !!E), c.current.lastHeaderIndex = i.length - 1;
+}, z = {
+  onConstructor: R,
+  onComponentDidMount: h,
+  onGetSnapshotBeforeUpdate: O,
+  onComponentDidUpdate: G,
+  onFocus: V,
+  onKeyDown: W,
+  generateMatrix: b,
+  focusFirstDataElement: D
 };
 export {
-  U as tableKeyboardNavigation
+  z as tableKeyboardNavigation
 };

package/navigation/utils.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 s=require("@progress/kendo-react-common"),o=require("./constants.js"),i=(e,t,n="cell")=>`${t}_${e}_${n}`,A=e=>{if(e)return parseInt(e.getAttribute(o.KEYBOARD_NAV_DATA_LEVEL)||"",10)},E=e=>{if(!e)return;const t=e.getAttribute(o.KEYBOARD_NAV_DATA_ID);return t||void 0},u=e=>e?!!e.getAttribute(o.KEYBOARD_NAV_DATA_ID):!1,g=(e,t={level:0})=>e.querySelector(`[${o.KEYBOARD_NAV_DATA_LEVEL}='${t.level}']`),d=e=>e&&e.parentElement&&e.parentElement.closest(`[${o.KEYBOARD_NAV_DATA_LEVEL}]`),N=(e,t)=>e.querySelector(`[${o.KEYBOARD_NAV_DATA_ID}='${t}']`),_=e=>e&&e.parentElement&&e.parentElement.closest(`[${o.KEYBOARD_NAV_DATA_SCOPE}]`),f=e=>e.querySelector(`[${o.KEYBOARD_NAV_DATA_HEADER}]`),b=e=>e.querySelector(`[${o.KEYBOARD_NAV_DATA_BODY}]`),v=(e,t={focusable:!1})=>{const n=t.focusable?s.FOCUSABLE_ELEMENTS:s.TABBABLE_ELEMENTS;return Array.from(e.querySelectorAll(n.join(",")))},D=(e,t={level:0})=>{if(!e)return[];const n=s.FOCUSABLE_ELEMENTS.map(l=>l+`[${o.KEYBOARD_NAV_DATA_LEVEL}='${t.level}']`).join(",");return Array.from(e.querySelectorAll(n))},I=(e={level:0})=>{const t=s.FOCUSABLE_ELEMENTS.map(n=>n+`[${o.KEYBOARD_NAV_DATA_LEVEL}='${e.level}']`).join(",");return n=>n.matches(t)},m=e=>{const{elementForFocus:t,event:n,contextStateRef:l,prevElement:a}=e;if(l.current&&t&&t.focus){n.preventDefault();const r=t.querySelector(".k-checkbox-wrap .k-checkbox");r&&r.focus?r.focus():t.focus(),u(t)&&(t.setAttribute("tabIndex","0"),l.current.activeId=E(t)),a&&u(a)&&a.setAttribute("tabIndex","-1")}},B=e=>e.current?e.current.idPrefix:"",L=(e,t,n,l,a)=>{if(!n)return[];let r=e+(a?-1:1);for(;r>=0&&r<l.length;){const c=l[r][t];if(c!==n)return[c,[r,t]];r=r+(a?-1:1)}return[]},T=(e,t,n,l,a)=>{if(!n)return[];let r=t+(a?-1:1);for(;r>=0&&r<l[e].length;){const c=l[e][r];if(c!==n)return[c,[e,r]];r=r+(a?-1:1)}return[]},x=(e,t)=>{if(t){for(let n=0;n<e.length;n++)for(let l=0;l<e[n].length;l++)if(e[n][l]===t)return[n,l]}},y=e=>e.current?e.current.navigationMatrix.length:0,O=e=>e?`${e}${o.KEYBOARD_NAV_FILTER_COL_SUFFIX}`:"",S={generateNavigatableId:i,getNavigatableId:E,getNavigatableLevel:A,getNavigatableElement:g,getClosestNavigatableElement:d,getActiveNavDataElement:N,getClosestScope:_,getHeaderElement:f,getBodyElement:b,getFocusableElements:v,getNavigatableElements:D,filterNavigatableElements:I,focusElement:m,getIdPrefix:B,isNavigatable:u,findNextIdByRowIndex:L,findNextIdByCellIndex:T,findId:x,getNextNavigationIndex:y,getFilterColumnId:O};exports.filterNavigatableElements=I;exports.findId=x;exports.findNextIdByCellIndex=T;exports.findNextIdByRowIndex=L;exports.focusElement=m;exports.generateNavigatableId=i;exports.getActiveNavDataElement=N;exports.getBodyElement=b;exports.getClosestNavigatableElement=d;exports.getClosestScope=_;exports.getFilterColumnId=O;exports.getFocusableElements=v;exports.getHeaderElement=f;exports.getIdPrefix=B;exports.getNavigatableElement=g;exports.getNavigatableElements=D;exports.getNavigatableId=E;exports.getNavigatableLevel=A;exports.getNextNavigationIndex=y;exports.isNavigatable=u;exports.tableKeyboardNavigationTools=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@progress/kendo-react-common"),a=require("./constants.js"),d=(e,t,r="cell")=>`${t}_${e}_${r}`,f=e=>{if(e)return parseInt(e.getAttribute(a.KEYBOARD_NAV_DATA_LEVEL)||"",10)},E=e=>{if(!e)return;const t=e.getAttribute(a.KEYBOARD_NAV_DATA_ID);return t||void 0},u=e=>e?!!e.getAttribute(a.KEYBOARD_NAV_DATA_ID):!1,N=(e,t={level:0})=>e.querySelector(`[${a.KEYBOARD_NAV_DATA_LEVEL}='${t.level}']`),_=e=>e&&e.parentElement&&e.parentElement.closest(`[${a.KEYBOARD_NAV_DATA_LEVEL}]`),g=(e,t)=>e.querySelector(`[${a.KEYBOARD_NAV_DATA_ID}='${t}']`),D=e=>e&&e.parentElement&&e.parentElement.closest(`[${a.KEYBOARD_NAV_DATA_SCOPE}]`),I=e=>e.querySelector(`[${a.KEYBOARD_NAV_DATA_HEADER}]`),v=e=>e.querySelector(`[${a.KEYBOARD_NAV_DATA_BODY}]`),O=e=>e.querySelector(".k-grid-norecords"),b=(e,t)=>{const{scope:r,navigationStateRef:n,contextStateRef:o}=e;if(!n.current||!r)return;const l=R(n.current.navigationMatrix),s=g(r,l);A({elementForFocus:s,contextStateRef:o,event:t})},m=(e,t={focusable:!1})=>{const r=t.focusable?c.FOCUSABLE_ELEMENTS:c.TABBABLE_ELEMENTS;return Array.from(e.querySelectorAll(r.join(",")))},x=(e,t={level:0})=>{if(!e)return[];const r=c.FOCUSABLE_ELEMENTS.map(n=>n+`[${a.KEYBOARD_NAV_DATA_LEVEL}='${t.level}']`).join(",");return Array.from(e.querySelectorAll(r))},C=(e={level:0})=>{const t=c.FOCUSABLE_ELEMENTS.map(r=>r+`[${a.KEYBOARD_NAV_DATA_LEVEL}='${e.level}']`).join(",");return r=>r.matches(t)},A=e=>{const{elementForFocus:t,event:r,contextStateRef:n,prevElement:o}=e;if(n.current&&t&&t.focus){r==null||r.preventDefault();const l=t.querySelector(".k-checkbox-wrap .k-checkbox");l&&l.focus?l.focus():t.focus(),u(t)&&(t.setAttribute("tabIndex","0"),n.current.activeId=E(t)),o&&u(o)&&o.setAttribute("tabIndex","-1")}},B=e=>e.current?e.current.idPrefix:"",L=(e,t,r,n,o)=>{if(!r)return[];let l=e+(o?-1:1);for(;l>=0&&l<n.length;){const s=n[l][t];if(s!==r)return[s,[l,t]];l=l+(o?-1:1)}return[]},y=(e,t,r,n,o)=>{if(!r)return[];let l=t+(o?-1:1);for(;l>=0&&l<n[e].length;){const s=n[e][l];if(s!==r)return[s,[e,l]];l=l+(o?-1:1)}return[]},i=(e,t)=>{if(t){for(let r=0;r<e.length;r++)for(let n=0;n<e[r].length;n++)if(e[r][n]===t)return[r,n]}},F=e=>e.current?e.current.navigationMatrix.length:0,R=e=>e.flat().find(t=>t.endsWith("cell")),S=e=>e.flat().reverse().find(t=>t.endsWith("cell")),V=(e,t)=>e[t][0],$=(e,t)=>Array.from(e[t]).reverse()[0],T=e=>e?`${e}${a.KEYBOARD_NAV_FILTER_COL_SUFFIX}`:"",p=(e,t,r)=>{let n;if(e.current&&e.current.prevNavigationIndexes){const[o,l]=e.current.prevNavigationIndexes;t[o][l]===r?n=e.current.prevNavigationIndexes:n=i(t,r)}else n=i(t,r);return n},K={generateNavigatableId:d,getNavigatableId:E,getNavigatableLevel:f,getNavigatableElement:N,getClosestNavigatableElement:_,getActiveNavDataElement:g,getClosestScope:D,getHeaderElement:I,getBodyElement:v,getFocusableElements:m,getNavigatableElements:x,filterNavigatableElements:C,focusElement:A,getIdPrefix:B,isNavigatable:u,findNextIdByRowIndex:L,findNextIdByCellIndex:y,findId:i,getNextNavigationIndex:F,getFilterColumnId:T,focusFirstDataElement:b};exports.filterNavigatableElements=C;exports.findId=i;exports.findNextIdByCellIndex=y;exports.findNextIdByRowIndex=L;exports.focusElement=A;exports.focusFirstDataElement=b;exports.generateNavigatableId=d;exports.getActiveNavDataElement=g;exports.getBodyElement=v;exports.getClosestNavigatableElement=_;exports.getClosestScope=D;exports.getCurrentIdIndexes=p;exports.getFilterColumnId=T;exports.getFirstDataCell=R;exports.getFirstRowDataCell=V;exports.getFocusableElements=m;exports.getHeaderElement=I;exports.getIdPrefix=B;exports.getLastDataCell=S;exports.getLastRowDataCell=$;exports.getNavigatableElement=N;exports.getNavigatableElements=x;exports.getNavigatableId=E;exports.getNavigatableLevel=f;exports.getNextNavigationIndex=F;exports.getNoRecordsElement=O;exports.isNavigatable=u;exports.tableKeyboardNavigationTools=K;