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

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: 1714143475,
+  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.9",
+  "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.9",
-    "@progress/kendo-react-buttons": "7.5.0-develop.9",
-    "@progress/kendo-react-common": "7.5.0-develop.9",
-    "@progress/kendo-react-dateinputs": "7.5.0-develop.9",
-    "@progress/kendo-react-dropdowns": "7.5.0-develop.9",
-    "@progress/kendo-react-inputs": "7.5.0-develop.9",
-    "@progress/kendo-react-intl": "7.5.0-develop.9",
-    "@progress/kendo-react-popup": "7.5.0-develop.9",
-    "@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"
   },

package/selection/TableSelection.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 B=require("react"),G=require("react-dom"),p=require("@progress/kendo-react-common"),t=require("./utils.js");function q(l){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const r in l)if(r!=="default"){const y=Object.getOwnPropertyDescriptor(l,r);Object.defineProperty(c,r,y.get?y:{enumerable:!0,get:()=>l[r]})}}return c.default=l,Object.freeze(c)}const n=q(B),J=q(G),L=l=>{var C;const{onRelease:c,childRef:r}=l,{enabled:y,drag:I,mode:d,cell:T}=t.getSelectionOptions(l.selectable),u=n.useRef(null),D=n.useRef(null),R=n.useRef({clientX:0,clientY:0}),[K,b]=n.useState(null),M=n.useRef(),v=n.useRef(!1),h=n.useRef(!1),j=n.useCallback(m=>{const{event:e}=m;h.current=t.isInNonSelectable(e.originalEvent.target),!(h.current||!u.current)&&(M.current=t.relativeContextElement(u.current.element),R.current={clientY:e.clientY,clientX:e.clientX})},[]),_=n.useCallback(m=>{const{event:e}=m,{clientX:o,clientY:s}=R.current;if(!h.current&&!(!I||d==="single")&&((Math.abs(s-e.clientY)>5||Math.abs(o-e.clientX)>5)&&(v.current=!0),v.current)){const a=t.getOffset(M.current);b({top:Math.min(s,e.clientY)-a.top,left:Math.min(o,e.clientX)-a.left,width:Math.abs(e.clientX-o),height:Math.abs(e.clientY-s)})}},[b,I,d]),F=n.useCallback(m=>{const{event:e}=m,{clientX:o,clientY:s}=R.current;if(h.current||!u.current)return;const a=u.current.element&&u.current.element.ownerDocument;if(a){if(v.current){const f=Math.min(s,e.clientY),E=Math.min(o,e.clientX),x=Math.max(s,e.clientY),g=Math.max(o,e.clientX),i=D.current;if(!i)return;i.style.visibility="hidden";const S=a.elementFromPoint(E,f),w=a.elementFromPoint(g,x);if(i.style.visibility="",!S||!w)return;const O=t.closestTagName(S,"TD"),z=t.closestTagName(O,"TR"),P=t.closestTagName(w,"TD"),A=t.closestTagName(P,"TR"),X=t.getColumnIndex(O),Y=t.getRowIndex(z),N=t.getColumnIndex(P),k=t.getRowIndex(A);X!==void 0&&Y!==void 0&&N!==void 0&&k!==void 0&&c({nativeEvent:e.originalEvent,startRowIndex:Y,startColIndex:X,endRowIndex:k,endColIndex:N,altKey:e.altKey,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,mode:d,cell:T,isDrag:!0})}else{const f=a.elementFromPoint(o,s);if(!f)return;const E=t.closestTagName(f,"TD"),x=t.closestTagName(f,"TR"),g=t.getColumnIndex(E),i=t.getRowIndex(x);E&&x&&i!==void 0&&g!==void 0&&c({nativeEvent:e.originalEvent,startRowIndex:i,startColIndex:g,endRowIndex:i,endColIndex:g,altKey:e.altKey,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,mode:d,cell:T,isDrag:!1})}b(null),v.current=!1,R.current={clientX:0,clientY:0}}},[b,d,T,c]),H=p.useDocument(D);return y?n.createElement(n.Fragment,null,n.createElement(p.Draggable,{onPress:j,onDrag:_,onRelease:F,ref:u,childRef:r},l.children),K&&J.createPortal(n.createElement("div",{ref:D,style:{...K,position:"fixed"},className:"k-marquee k-marquee-color"}),(C=H())==null?void 0:C.body)):n.cloneElement(n.Children.only(l.children),{ref:r})};exports.TableSelection=L;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react"),W=require("react-dom"),j=require("@progress/kendo-react-common"),t=require("./utils.js");function F(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const a in l)if(a!=="default"){const g=Object.getOwnPropertyDescriptor(l,a);Object.defineProperty(s,a,g.get?g:{enumerable:!0,get:()=>l[a]})}}return s.default=l,Object.freeze(s)}const n=F(V),Z=F(W),$=l=>{var C;const{onRelease:s,childRef:a}=l,{enabled:g,drag:I,mode:i,cell:T}=t.getSelectionOptions(l.selectable),o=n.useRef(null),X=n.useRef(null),y=n.useRef({clientX:0,clientY:0,scrollX:0,scrollY:0,pressedElement:null}),[K,R]=n.useState(null),M=n.useRef(),b=n.useRef(!1),v=n.useRef(!1),_=n.useCallback(u=>{const{event:e}=u;if(v.current=t.isInNonSelectable(e.originalEvent.target),v.current||!o.current)return;M.current=t.relativeContextElement(o.current.element);const r=o.current.element&&o.current.element.ownerDocument;if(!r)return;const c=r.elementFromPoint(e.clientX,e.clientY);y.current={clientY:e.clientY,clientX:e.clientX,scrollX:e.scrollX,scrollY:e.scrollY,pressedElement:c}},[]),H=n.useCallback(u=>{const{event:e}=u,{clientX:r,clientY:c}=y.current;if(!v.current&&!(!I||i==="single")&&((Math.abs(c-e.clientY)>5||Math.abs(r-e.clientX)>5)&&(b.current=!0),b.current)){const E=t.getOffset(M.current);R({top:Math.min(c,e.clientY)-E.top,left:Math.min(r,e.clientX)-E.left,width:Math.abs(e.clientX-r),height:Math.abs(e.clientY-c)})}},[R,I,i]),z=n.useCallback(u=>{const{event:e}=u,{clientX:r,clientY:c,scrollX:E,scrollY:B,pressedElement:G}=y.current;if(v.current||!o.current)return;const h=o.current.element&&o.current.element.ownerDocument;if(h){if(b.current){const m=e.scrollY-B,D=e.scrollX-E,x=Math.min(c,e.clientY),d=Math.min(r,e.clientX),f=Math.max(c,e.clientY),J=Math.max(r,e.clientX),Y=X.current;if(!Y)return;Y.style.visibility="hidden";const L=h.elementFromPoint(d,x),S=m>0||D>0?G:L,w=h.elementFromPoint(J,f);if(Y.style.visibility="",!S||!w)return;const P=t.closestTagName(S,"TD"),Q=t.closestTagName(P,"TR"),p=t.closestTagName(w,"TD"),U=t.closestTagName(p,"TR"),O=t.getColumnIndex(P),N=t.getRowIndex(Q),k=t.getColumnIndex(p),q=t.getRowIndex(U);O!==void 0&&N!==void 0&&k!==void 0&&q!==void 0&&s({nativeEvent:e.originalEvent,startRowIndex:N,startColIndex:O,endRowIndex:q,endColIndex:k,altKey:e.altKey,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,mode:i,cell:T,isDrag:!0})}else{const m=h.elementFromPoint(r,c);if(!m)return;const D=t.closestTagName(m,"TD"),x=t.closestTagName(m,"TR"),d=t.getColumnIndex(D),f=t.getRowIndex(x);D&&x&&f!==void 0&&d!==void 0&&s({nativeEvent:e.originalEvent,startRowIndex:f,startColIndex:d,endRowIndex:f,endColIndex:d,altKey:e.altKey,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,mode:i,cell:T,isDrag:!1})}R(null),b.current=!1,y.current={clientX:0,clientY:0,scrollX:0,scrollY:0,pressedElement:null}}},[R,i,T,s]),A=j.useDocument(X);return g?n.createElement(n.Fragment,null,n.createElement(j.Draggable,{onPress:_,onDrag:H,onRelease:z,ref:o,childRef:a},l.children),K&&Z.createPortal(n.createElement("div",{ref:X,style:{...K,position:"fixed"},className:"k-marquee k-marquee-color"}),(C=A())==null?void 0:C.body)):n.cloneElement(n.Children.only(l.children),{ref:a})};exports.TableSelection=$;