@progress/kendo-react-data-tools 7.5.0-develop.8 → 8.0.0-develop.1

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;

package/navigation/utils.mjs

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

package/package-metadata.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-data-tools",
-  "version": "7.5.0-develop.8",
+  "version": "8.0.0-develop.1",
   "description": "Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools 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": "7.5.0-develop.8",
-    "@progress/kendo-react-buttons": "7.5.0-develop.8",
-    "@progress/kendo-react-common": "7.5.0-develop.8",
-    "@progress/kendo-react-dateinputs": "7.5.0-develop.8",
-    "@progress/kendo-react-dropdowns": "7.5.0-develop.8",
-    "@progress/kendo-react-inputs": "7.5.0-develop.8",
-    "@progress/kendo-react-intl": "7.5.0-develop.8",
-    "@progress/kendo-react-popup": "7.5.0-develop.8",
-    "@progress/kendo-svg-icons": "^2.1.0",
+    "@progress/kendo-react-animation": "8.0.0-develop.1",
+    "@progress/kendo-react-buttons": "8.0.0-develop.1",
+    "@progress/kendo-react-common": "8.0.0-develop.1",
+    "@progress/kendo-react-dateinputs": "8.0.0-develop.1",
+    "@progress/kendo-react-dropdowns": "8.0.0-develop.1",
+    "@progress/kendo-react-inputs": "8.0.0-develop.1",
+    "@progress/kendo-react-intl": "8.0.0-develop.1",
+    "@progress/kendo-react-popup": "8.0.0-develop.1",
+    "@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"
   },