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