@progress/kendo-react-data-tools/navigation/TableKeyboardNavigation.js

Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * 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"),t=require("./utils.js"),p=require("./NavigatableSettings.js"),B=e=>{const{navigatable:s,contextStateRef:n,navigationStateRef:a,idPrefix:r}=e;s&&(n.current={activeId:"",level:0},a.current={activeElementIsFocused:!1,prevNavigationIndexes:void 0,idPrefix:r||l.guid(),navigationMatrix:[],lastHeaderIndex:-1})},M=e=>{const{scope:s,contextStateRef:n,navigationStateRef:a}=e;if(n.current&&a.current&&s){R(e);const r=t.getFirstDataCell(a.current.navigationMatrix);if(r){const g=t.tableKeyboardNavigationTools.getActiveNavDataElement(s,r);g&&(n.current.activeId=r,g.setAttribute("tabIndex","0"))}}},P=e=>{const{contextStateRef:s,navigationStateRef:n,document:a}=e;if(s.current&&n.current&&a){const r=l.getActiveElement(a),g=t.tableKeyboardNavigationTools.getNavigatableId(r);g&&g===s.current.activeId&&(n.current.activeElementIsFocused=!0)}},S=(e,s,n)=>{if(s){e();return}const a=document.activeElement;a&&a!==document.body&&n&&!n.contains(a)||e()},H=e=>{const{scope:s,contextStateRef:n,navigationStateRef:a,focusFirst:r,newEditableRow:g,singleEditRow:c,lastActiveElement:f,navigatable:o,userInitiatedEdit:b}=e;if(r&&(B(e),M(e),t.focusFirstDataElement(e)),(!o||o&&o.mode===p.NavigatableMode.inline)&&(g&&!c||g&&c&&!f)?S(()=>t.focusFirstEditor(g),b,s):o&&o.mode===p.NavigatableMode.inline&&g&&c&&f&&S(()=>f.focus(),b,s),R(e),n.current&&a.current&&s){if(!t.tableKeyboardNavigationTools.getActiveNavDataElement(s,n.current.activeId)){const N=s.className.indexOf("k-treelist")===-1?t.getFirstDataCell(a.current.navigationMatrix):a.current.navigationMatrix[0][0],y=t.tableKeyboardNavigationTools.getActiveNavDataElement(s,N);N&&y&&(n.current.activeId=N,y.setAttribute("tabIndex","0"),a.current.activeElementIsFocused&&y.focus())}a.current.activeElementIsFocused=!1}},O=(e,s)=>{const{contextStateRef:n}=s;if(e.isDefaultPrevented()||!n.current)return;const a=e.target,r=t.tableKeyboardNavigationTools.getNavigatableId(a);if(r&&r!==n.current.activeId){const g=t.tableKeyboardNavigationTools.getClosestScope(a);if(!g)return;const c=t.tableKeyboardNavigationTools.getActiveNavDataElement(g,n.current.activeId);c&&!e.target.classList.contains("k-table-td")&&!e.target.classList.contains("k-detail-cell")&&c.setAttribute("tabIndex","-1"),a.setAttribute("tabIndex","0"),n.current.activeId=r}else if(a.closest(".k-filtercell")&&s.navigatable){const g=a.closest(".k-table-td");l.enableNavigatableContainer(g)}},q=async(e,s)=>{var x,D,w,F,A;const{contextStateRef:n,navigationStateRef:a,onNavigationAction:r,columns:g}=s;if(e.isDefaultPrevented()||!n.current||!a.current)return;let c;if(e.keyCode===l.Keys.esc&&!s.navigatable.mode){c=t.tableKeyboardNavigationTools.getClosestNavigatableElement(e.target),t.tableKeyboardNavigationTools.focusElement({elementForFocus:c,event:e,contextStateRef:n}),e.target.closest(".k-filtercell")&&c&&s.navigatable&&l.disableNavigatableContainer(c);return}const f=e.target,o=f.className.indexOf("k-checkbox")===-1?f:t.tableKeyboardNavigationTools.getClosestNavigatableElement(f),b=t.tableKeyboardNavigationTools.getNavigatableId(o)||((x=t.tableKeyboardNavigationTools.getParentCell(o))==null?void 0:x.getAttribute("data-keyboardnavid")),C=b==null?void 0:b.endsWith("column"),N=b==null?void 0:b.endsWith("column_filter"),y=t.tableKeyboardNavigationTools.getNavigatableLevel(o),K=t.tableKeyboardNavigationTools.getClosestScope(o),E=a.current.navigationMatrix,v=e.metaKey||e.ctrlKey,d=t.getCurrentIdIndexes(a,E,b),k=o.closest(".k-table-td"),T=(D=o.closest(".k-table-td"))==null?void 0:D.classList.contains("k-grid-edit-cell");if(s.navigatable&&s.navigatable.mode===p.NavigatableMode.inline){if(e.keyCode===l.Keys.enter){const i=o.classList.contains("k-grid-remove-command"),u=o.classList.contains("k-grid-cancel-command"),m=t.tableKeyboardNavigationTools.getRowAriaRowIndex(o);if(i){setTimeout(()=>{const I=t.tableKeyboardNavigationTools.getRemoveButtonByAriaRowIndex(m.current)||t.tableKeyboardNavigationTools.getRemoveButtonByAriaRowIndex(m.prev);I&&I.focus()});return}else if(u&&o.parentElement){const I=(w=t.tableKeyboardNavigationTools.getClosestNavigatableElement(o))==null?void 0:w.getAttribute("data-keyboardnavid");setTimeout(()=>{I&&t.tableKeyboardNavigationTools.getTableCellByKeyboardNavId(I).focus()});return}}if(e.keyCode===l.Keys.esc){const i=t.tableKeyboardNavigationTools.getClosestCancelButton(o);i&&i.click();const u=await t.tableKeyboardNavigationTools.getClosestEditButton(o);u&&u.focus();return}}else if(s.navigatable&&s.navigatable.mode===p.NavigatableMode.incell){if(e.keyCode===l.Keys.esc){o.focus(),o.blur();const i=((F=f==null?void 0:f.parentElement)==null?void 0:F.closest(".k-grid-edit-row"))||null,u=t.tableKeyboardNavigationTools.getClosestCellNavId(o),m=await t.tableKeyboardNavigationTools.waitForElementToBeVisible(`[data-keyboardnavid='${u}']:not(.k-grid-edit-cell)`,i);m&&m.focus()}else if(e.keyCode===l.Keys.enter){let i;if(d){const[u,m]=d;i=t.findNextIdByRowIndex(u,m,b,E,!1)}if(!T)(A=t.tableKeyboardNavigationTools.getParentCell(o))==null||A.click();else if(T&&i){const u=i&&i[0]&&t.tableKeyboardNavigationTools.getTableCellByKeyboardNavId(i[0]);u&&u.click()}}else if(e.keyCode===l.Keys.left||e.keyCode===l.Keys.right||e.keyCode===l.Keys.up||e.keyCode===l.Keys.down){if(T)return}else if(e.key==="Tab"&&T){if(e.shiftKey){const i=d&&g&&t.tableKeyboardNavigationTools.getPrevEditableCell(d,g,b,E);if(i&&i.prevCell&&i.prevCell.click(),i&&i.elementToFocus!=="gridcell"){o.blur();const u=t.tableKeyboardNavigationTools.getClosestCellNavId(o);setTimeout(()=>{u&&t.tableKeyboardNavigationTools.getTableCellByKeyboardNavId(u).focus()})}e.preventDefault()}else{const i=d&&g&&t.tableKeyboardNavigationTools.getNextEditableCell(d,g,b,E);if(i&&i.nextCell&&i.elementToFocus==="gridcell"&&i.nextCell.click(),i&&i.elementToFocus!=="gridcell"){o.blur();const u=t.tableKeyboardNavigationTools.getClosestCellNavId(o);u&&t.tableKeyboardNavigationTools.getTableCellByKeyboardNavId(u).focus();return}e.preventDefault()}e.preventDefault()}}if(o.closest(".k-filtercell")&&k&&s.navigatable){l.keepFocusInContainer(e,k,l.TABBABLE_ELEMENTS);return}if(y!==void 0&&K){if(e.keyCode===l.Keys.enter){const i=t.tableKeyboardNavigationTools.getNavigatableElement(o,{level:y+1});if(i){t.tableKeyboardNavigationTools.focusElement({elementForFocus:i,event:e,contextStateRef:n,prevElement:o});return}o.querySelector(".k-filtercell")&&s.navigatable&&l.enableNavigatableContainer(o),c=t.tableKeyboardNavigationTools.getFocusableElements(o)[0],t.tableKeyboardNavigationTools.focusElement({elementForFocus:c,event:e,contextStateRef:n,prevElement:o})}if(e.keyCode===l.Keys.home&&d)if(v)t.focusFirstDataElement({scope:K,navigationStateRef:a,contextStateRef:n},e);else{const i=t.getFirstRowDataCell(a.current.navigationMatrix,d[0]);c=t.tableKeyboardNavigationTools.getActiveNavDataElement(K,i),t.tableKeyboardNavigationTools.focusElement({elementForFocus:c,event:e,contextStateRef:n})}if(e.keyCode===l.Keys.end&&d)if(v){const i=t.getLastDataCell(a.current.navigationMatrix);c=t.tableKeyboardNavigationTools.getActiveNavDataElement(K,i),t.tableKeyboardNavigationTools.focusElement({elementForFocus:c,event:e,contextStateRef:n})}else{const i=t.getLastRowDataCell(a.current.navigationMatrix,d[0]);c=t.tableKeyboardNavigationTools.getActiveNavDataElement(K,i),t.tableKeyboardNavigationTools.focusElement({elementForFocus:c,event:e,contextStateRef:n})}if(e.keyCode===l.Keys.up||e.keyCode===l.Keys.down||e.keyCode===l.Keys.left||e.keyCode===l.Keys.right){const i=e.keyCode===l.Keys.up||e.keyCode===l.Keys.left,u=e.keyCode===l.Keys.up||e.keyCode===l.Keys.down;if(d){const[m,I]=d,[h,L]=u?t.findNextIdByRowIndex(m,I,b,E,i):t.findNextIdByCellIndex(m,I,b,E,i);h&&(c=t.tableKeyboardNavigationTools.getActiveNavDataElement(K,h),t.tableKeyboardNavigationTools.focusElement({elementForFocus:c,event:e,contextStateRef:n,prevElement:o}),a.current.prevNavigationIndexes=L)}}if(v&&e.keyCode===l.Keys.left&&C){r&&r({focusElement:o,event:e,action:"reorderToLeft"}),e.preventDefault();return}if(v&&e.keyCode===l.Keys.right&&C){r&&r({focusElement:o,event:e,action:"reorderToRight"}),e.preventDefault();return}if(e.keyCode===l.Keys.pageUp){r&&r({focusElement:c,event:e,action:"moveToNextPage"}),e.preventDefault();return}if(e.keyCode===l.Keys.pageDown){r&&r({focusElement:c,event:e,action:"moveToPrevPage"}),e.preventDefault();return}if(!C&&!N&&!T&&(e.keyCode===l.Keys.space||e.keyCode===l.Keys.enter||e.shiftKey&&(e.keyCode===l.Keys.up||e.keyCode===l.Keys.down||e.keyCode===l.Keys.left||e.keyCode===l.Keys.right))){r&&r({focusElement:c,event:e,action:"select"});return}r&&r({focusElement:c,event:e})}},R=e=>{const{navigationStateRef:s,scope:n}=e;if(!s.current||!n)return;const a=[],r=t.getHeaderElement(n),g=t.getBodyElement(n),c=t.getNoRecordsElement(n)||{children:[]};if(!r||!g)return;const f=Array.from(r.children),o=Array.from(g.children);[...f,...o,c].forEach((b,C)=>{Array.from(b.children).forEach(N=>{const y=t.getNavigatableId(N);if(!y)return;const K=N.rowSpan||1,E=N.colSpan||1;let v;for(let d=C,k=C+K;d<k;d++){if(a[d]||(a[d]=[]),v===void 0){const T=a[d].findIndex(x=>!x);v=T>-1?T:a[d].length}a[d][v]=y||""}for(let d=v+1,k=v+E;d<k;d++)a[C][d]=y||""})}),s.current.navigationMatrix=a.filter(b=>!!b),s.current.lastHeaderIndex=f.length-1},G={onConstructor:B,onComponentDidMount:M,onGetSnapshotBeforeUpdate:P,onComponentDidUpdate:H,onFocus:O,onKeyDown:q,generateMatrix:R,focusFirstDataElement:t.focusFirstDataElement};exports.tableKeyboardNavigation=G;