@progress/kendo-react-data-tools 8.2.0-develop.1 → 8.2.0-develop.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-react-datatools.js +1 -1
- package/drag/ColumnDraggable.js +1 -1
- package/drag/ColumnDraggable.mjs +2 -1
- package/drag/ColumnResizer.js +1 -1
- package/drag/ColumnResizer.mjs +1 -0
- package/index.d.mts +43 -2
- package/index.d.ts +43 -2
- package/index.js +1 -1
- package/index.mjs +130 -126
- package/navigation/NavigatableSettings.js +8 -0
- package/navigation/NavigatableSettings.mjs +12 -0
- package/navigation/TableKeyboardNavigation.js +1 -1
- package/navigation/TableKeyboardNavigation.mjs +132 -105
- package/navigation/constants.js +1 -1
- package/navigation/constants.mjs +11 -9
- package/navigation/utils.js +1 -1
- package/navigation/utils.mjs +116 -71
- package/package-metadata.mjs +1 -1
- package/package.json +9 -9
|
@@ -6,170 +6,197 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import { guid as
|
|
10
|
-
import { focusFirstDataElement as
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
import { guid as w, getActiveElement as S, Keys as l } from "@progress/kendo-react-common";
|
|
10
|
+
import { focusFirstDataElement as p, getFirstDataCell as D, tableKeyboardNavigationTools as n, focusFirstEditor as F, getCurrentIdIndexes as B, getFirstRowDataCell as M, getLastRowDataCell as L, getLastDataCell as T, getHeaderElement as K, getBodyElement as P, getNoRecordsElement as H, getNavigatableId as U, findNextIdByRowIndex as O, findNextIdByCellIndex as G } from "./utils.mjs";
|
|
11
|
+
import { NavigatableMode as V } from "./NavigatableSettings.mjs";
|
|
12
|
+
const k = (e) => {
|
|
13
|
+
const { navigatable: s, contextStateRef: o, navigationStateRef: t, idPrefix: i } = e;
|
|
14
|
+
s && (o.current = {
|
|
14
15
|
activeId: "",
|
|
15
16
|
level: 0
|
|
16
17
|
}, t.current = {
|
|
17
18
|
activeElementIsFocused: !1,
|
|
18
19
|
prevNavigationIndexes: void 0,
|
|
19
|
-
idPrefix:
|
|
20
|
+
idPrefix: i || w(),
|
|
20
21
|
navigationMatrix: [],
|
|
21
22
|
lastHeaderIndex: -1
|
|
22
23
|
});
|
|
23
|
-
},
|
|
24
|
-
const { scope:
|
|
25
|
-
if (
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
-
if (
|
|
29
|
-
const
|
|
30
|
-
|
|
24
|
+
}, A = (e) => {
|
|
25
|
+
const { scope: s, contextStateRef: o, navigationStateRef: t } = e;
|
|
26
|
+
if (o.current && t.current && s) {
|
|
27
|
+
R(e);
|
|
28
|
+
const i = D(t.current.navigationMatrix);
|
|
29
|
+
if (i) {
|
|
30
|
+
const a = n.getActiveNavDataElement(s, i);
|
|
31
|
+
a && (o.current.activeId = i, a.setAttribute("tabIndex", "0"));
|
|
31
32
|
}
|
|
32
33
|
}
|
|
33
|
-
},
|
|
34
|
-
const { contextStateRef:
|
|
35
|
-
if (
|
|
36
|
-
const
|
|
37
|
-
|
|
34
|
+
}, W = (e) => {
|
|
35
|
+
const { contextStateRef: s, navigationStateRef: o, document: t } = e;
|
|
36
|
+
if (s.current && o.current && t) {
|
|
37
|
+
const i = S(t), a = n.getNavigatableId(i);
|
|
38
|
+
a && a === s.current.activeId && (o.current.activeElementIsFocused = !0);
|
|
38
39
|
}
|
|
39
|
-
},
|
|
40
|
-
const { scope:
|
|
41
|
-
if (
|
|
42
|
-
if (!
|
|
43
|
-
const f =
|
|
44
|
-
f &&
|
|
40
|
+
}, j = (e) => {
|
|
41
|
+
const { scope: s, contextStateRef: o, navigationStateRef: t, focusFirst: i, newEditableRow: a, singleEditRow: d, lastActiveElement: c } = e;
|
|
42
|
+
if (i && (k(e), A(e), p(e)), a && !d || a && d && !c ? F(a) : a && d && c && c.focus(), R(e), o.current && t.current && s) {
|
|
43
|
+
if (!n.getActiveNavDataElement(s, o.current.activeId)) {
|
|
44
|
+
const f = D(t.current.navigationMatrix), u = n.getActiveNavDataElement(s, f);
|
|
45
|
+
f && u && (o.current.activeId = f, u.setAttribute("tabIndex", "0"), t.current.activeElementIsFocused && u.focus());
|
|
45
46
|
}
|
|
46
47
|
t.current.activeElementIsFocused = !1;
|
|
47
48
|
}
|
|
48
|
-
},
|
|
49
|
-
const { contextStateRef:
|
|
50
|
-
if (e.isDefaultPrevented() || !
|
|
49
|
+
}, q = (e, s) => {
|
|
50
|
+
const { contextStateRef: o } = s;
|
|
51
|
+
if (e.isDefaultPrevented() || !o.current)
|
|
51
52
|
return;
|
|
52
|
-
const t = e.target,
|
|
53
|
-
if (
|
|
54
|
-
const
|
|
55
|
-
if (!
|
|
53
|
+
const t = e.target, i = n.getNavigatableId(t);
|
|
54
|
+
if (i && i !== o.current.activeId) {
|
|
55
|
+
const a = n.getClosestScope(t);
|
|
56
|
+
if (!a)
|
|
56
57
|
return;
|
|
57
|
-
const
|
|
58
|
-
|
|
58
|
+
const d = n.getActiveNavDataElement(a, o.current.activeId);
|
|
59
|
+
d && !e.target.classList.contains("k-table-td") && !e.target.classList.contains("k-detail-cell") && d.setAttribute("tabIndex", "-1"), t.setAttribute("tabIndex", "0"), o.current.activeId = i;
|
|
59
60
|
}
|
|
60
|
-
},
|
|
61
|
+
}, z = async (e, s) => {
|
|
62
|
+
var x;
|
|
61
63
|
const {
|
|
62
|
-
contextStateRef:
|
|
64
|
+
contextStateRef: o,
|
|
63
65
|
navigationStateRef: t,
|
|
64
|
-
onNavigationAction:
|
|
65
|
-
} =
|
|
66
|
-
if (e.isDefaultPrevented() || !
|
|
66
|
+
onNavigationAction: i
|
|
67
|
+
} = s;
|
|
68
|
+
if (e.isDefaultPrevented() || !o.current || !t.current)
|
|
67
69
|
return;
|
|
68
|
-
let
|
|
69
|
-
if (e.keyCode === l.esc) {
|
|
70
|
-
|
|
70
|
+
let a;
|
|
71
|
+
if (e.keyCode === l.esc && !s.navigatable.mode) {
|
|
72
|
+
a = n.getClosestNavigatableElement(e.target), n.focusElement({ elementForFocus: a, event: e, contextStateRef: o });
|
|
71
73
|
return;
|
|
72
74
|
}
|
|
73
|
-
const
|
|
74
|
-
if (
|
|
75
|
+
const d = e.target, c = d.className.indexOf("k-checkbox") === -1 ? d : n.getClosestNavigatableElement(d), E = n.getNavigatableId(c), f = E == null ? void 0 : E.endsWith("column"), u = n.getNavigatableLevel(c), g = n.getClosestScope(c), y = t.current.navigationMatrix, b = e.metaKey || e.ctrlKey, I = B(t, y, E);
|
|
76
|
+
if (s.navigatable && s.navigatable.mode === V.inline) {
|
|
75
77
|
if (e.keyCode === l.enter) {
|
|
76
|
-
const
|
|
77
|
-
if (
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
const r = c.classList.contains("k-grid-remove-command"), m = c.classList.contains("k-grid-cancel-command"), C = n.getRowAriaRowIndex(c);
|
|
79
|
+
if (r) {
|
|
80
|
+
setTimeout(() => {
|
|
81
|
+
const v = n.getRemoveButtonByAriaRowIndex(C.current) || n.getRemoveButtonByAriaRowIndex(C.prev);
|
|
82
|
+
v && v.focus();
|
|
83
|
+
});
|
|
84
|
+
return;
|
|
85
|
+
} else if (m && c.parentElement) {
|
|
86
|
+
const v = (x = n.getClosestNavigatableElement(c)) == null ? void 0 : x.getAttribute("data-keyboardnavid");
|
|
87
|
+
setTimeout(() => {
|
|
88
|
+
v && n.getTableCellByKeyboardNavId(v).focus();
|
|
89
|
+
});
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
if (e.keyCode === l.esc) {
|
|
94
|
+
const r = n.getClosestCancelButton(c);
|
|
95
|
+
r && r.click();
|
|
96
|
+
const m = await n.getClosestEditButton(c);
|
|
97
|
+
m && m.focus();
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
if (u !== void 0 && g) {
|
|
102
|
+
if (e.keyCode === l.enter) {
|
|
103
|
+
const r = n.getNavigatableElement(c, { level: u + 1 });
|
|
104
|
+
if (r) {
|
|
105
|
+
n.focusElement({
|
|
106
|
+
elementForFocus: r,
|
|
80
107
|
event: e,
|
|
81
|
-
contextStateRef:
|
|
82
|
-
prevElement:
|
|
108
|
+
contextStateRef: o,
|
|
109
|
+
prevElement: c
|
|
83
110
|
});
|
|
84
111
|
return;
|
|
85
112
|
} else {
|
|
86
|
-
|
|
113
|
+
a = n.getFocusableElements(c)[0], n.focusElement({ elementForFocus: a, event: e, contextStateRef: o, prevElement: c });
|
|
87
114
|
return;
|
|
88
115
|
}
|
|
89
116
|
}
|
|
90
|
-
if (e.keyCode === l.home &&
|
|
91
|
-
if (
|
|
92
|
-
|
|
117
|
+
if (e.keyCode === l.home && I)
|
|
118
|
+
if (b)
|
|
119
|
+
p(
|
|
93
120
|
{
|
|
94
|
-
scope:
|
|
121
|
+
scope: g,
|
|
95
122
|
navigationStateRef: t,
|
|
96
|
-
contextStateRef:
|
|
123
|
+
contextStateRef: o
|
|
97
124
|
},
|
|
98
125
|
e
|
|
99
126
|
);
|
|
100
127
|
else {
|
|
101
|
-
const
|
|
102
|
-
|
|
128
|
+
const r = M(t.current.navigationMatrix, I[0]);
|
|
129
|
+
a = n.getActiveNavDataElement(g, r), n.focusElement({ elementForFocus: a, event: e, contextStateRef: o });
|
|
103
130
|
}
|
|
104
|
-
if (e.keyCode === l.end &&
|
|
105
|
-
if (
|
|
106
|
-
const
|
|
107
|
-
|
|
131
|
+
if (e.keyCode === l.end && I)
|
|
132
|
+
if (b) {
|
|
133
|
+
const r = T(t.current.navigationMatrix);
|
|
134
|
+
a = n.getActiveNavDataElement(g, r), n.focusElement({ elementForFocus: a, event: e, contextStateRef: o });
|
|
108
135
|
} else {
|
|
109
|
-
const
|
|
110
|
-
|
|
136
|
+
const r = L(t.current.navigationMatrix, I[0]);
|
|
137
|
+
a = n.getActiveNavDataElement(g, r), n.focusElement({ elementForFocus: a, event: e, contextStateRef: o });
|
|
111
138
|
}
|
|
112
139
|
if (e.keyCode === l.up || e.keyCode === l.down || e.keyCode === l.left || e.keyCode === l.right) {
|
|
113
|
-
const
|
|
114
|
-
if (
|
|
115
|
-
const [
|
|
116
|
-
|
|
140
|
+
const r = e.keyCode === l.up || e.keyCode === l.left, m = e.keyCode === l.up || e.keyCode === l.down;
|
|
141
|
+
if (I) {
|
|
142
|
+
const [C, v] = I, [N, h] = m ? O(C, v, E, y, r) : G(C, v, E, y, r);
|
|
143
|
+
N && (a = n.getActiveNavDataElement(g, N), n.focusElement({ elementForFocus: a, event: e, contextStateRef: o, prevElement: c }), t.current.prevNavigationIndexes = h);
|
|
117
144
|
}
|
|
118
145
|
}
|
|
119
|
-
if (
|
|
120
|
-
|
|
146
|
+
if (b && e.keyCode === l.left && f) {
|
|
147
|
+
i && i({ focusElement: c, event: e, action: "reorderToLeft" }), e.preventDefault();
|
|
121
148
|
return;
|
|
122
149
|
}
|
|
123
|
-
if (
|
|
124
|
-
|
|
150
|
+
if (b && e.keyCode === l.right && f) {
|
|
151
|
+
i && i({ focusElement: c, event: e, action: "reorderToRight" }), e.preventDefault();
|
|
125
152
|
return;
|
|
126
153
|
}
|
|
127
154
|
if (e.keyCode === l.pageUp) {
|
|
128
|
-
|
|
155
|
+
i && i({ focusElement: a, event: e, action: "moveToNextPage" }), e.preventDefault();
|
|
129
156
|
return;
|
|
130
157
|
}
|
|
131
158
|
if (e.keyCode === l.pageDown) {
|
|
132
|
-
|
|
159
|
+
i && i({ focusElement: a, event: e, action: "moveToPrevPage" }), e.preventDefault();
|
|
133
160
|
return;
|
|
134
161
|
}
|
|
135
|
-
|
|
162
|
+
i && i({ focusElement: a, event: e });
|
|
136
163
|
}
|
|
137
|
-
},
|
|
138
|
-
const { navigationStateRef:
|
|
139
|
-
if (!
|
|
164
|
+
}, R = (e) => {
|
|
165
|
+
const { navigationStateRef: s, scope: o } = e;
|
|
166
|
+
if (!s.current || !o)
|
|
140
167
|
return;
|
|
141
|
-
const t = [],
|
|
142
|
-
if (!
|
|
168
|
+
const t = [], i = K(o), a = P(o), d = H(o) || { children: [] };
|
|
169
|
+
if (!i || !a)
|
|
143
170
|
return;
|
|
144
|
-
const
|
|
145
|
-
[...
|
|
146
|
-
Array.from(
|
|
147
|
-
const
|
|
148
|
-
if (!
|
|
171
|
+
const c = Array.from(i.children), E = Array.from(a.children);
|
|
172
|
+
[...c, ...E, d].forEach((f, u) => {
|
|
173
|
+
Array.from(f.children).forEach((g) => {
|
|
174
|
+
const y = U(g);
|
|
175
|
+
if (!y)
|
|
149
176
|
return;
|
|
150
|
-
const
|
|
151
|
-
let
|
|
152
|
-
for (let
|
|
153
|
-
if (t[
|
|
154
|
-
const C = t[
|
|
155
|
-
|
|
177
|
+
const b = g.rowSpan || 1, I = g.colSpan || 1;
|
|
178
|
+
let x;
|
|
179
|
+
for (let r = u, m = u + b; r < m; r++) {
|
|
180
|
+
if (t[r] || (t[r] = []), x === void 0) {
|
|
181
|
+
const C = t[r].findIndex((v) => !v);
|
|
182
|
+
x = C > -1 ? C : t[r].length;
|
|
156
183
|
}
|
|
157
|
-
t[
|
|
184
|
+
t[r][x] = y || "";
|
|
158
185
|
}
|
|
159
|
-
for (let
|
|
160
|
-
t[
|
|
186
|
+
for (let r = x + 1, m = x + I; r < m; r++)
|
|
187
|
+
t[u][r] = y || "";
|
|
161
188
|
});
|
|
162
|
-
}),
|
|
163
|
-
},
|
|
164
|
-
onConstructor:
|
|
165
|
-
onComponentDidMount:
|
|
166
|
-
onGetSnapshotBeforeUpdate:
|
|
167
|
-
onComponentDidUpdate:
|
|
168
|
-
onFocus:
|
|
169
|
-
onKeyDown:
|
|
170
|
-
generateMatrix:
|
|
171
|
-
focusFirstDataElement:
|
|
189
|
+
}), s.current.navigationMatrix = t.filter((f) => !!f), s.current.lastHeaderIndex = c.length - 1;
|
|
190
|
+
}, Y = {
|
|
191
|
+
onConstructor: k,
|
|
192
|
+
onComponentDidMount: A,
|
|
193
|
+
onGetSnapshotBeforeUpdate: W,
|
|
194
|
+
onComponentDidUpdate: j,
|
|
195
|
+
onFocus: q,
|
|
196
|
+
onKeyDown: z,
|
|
197
|
+
generateMatrix: R,
|
|
198
|
+
focusFirstDataElement: p
|
|
172
199
|
};
|
|
173
200
|
export {
|
|
174
|
-
|
|
201
|
+
Y as tableKeyboardNavigation
|
|
175
202
|
};
|
package/navigation/constants.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a="data-keyboardnavlevel",A="data-keyboardnavscope",_="data-keyboardnavheader",t="data-keyboardnavbody",e="data-keyboardnavid",o="data-keyboardnavzone",D="_filter",E="k-grid-cancel-command",d="k-grid-edit-command",N={[A]:!0},n={[_]:!0},r={[t]:!0};exports.KEYBOARD_NAV_CANCEL_BUTTON_CLASS=E;exports.KEYBOARD_NAV_DATA_BODY=t;exports.KEYBOARD_NAV_DATA_HEADER=_;exports.KEYBOARD_NAV_DATA_ID=e;exports.KEYBOARD_NAV_DATA_LEVEL=a;exports.KEYBOARD_NAV_DATA_SCOPE=A;exports.KEYBOARD_NAV_DATA_ZONE=o;exports.KEYBOARD_NAV_EDIT_BUTTON_CLASS=d;exports.KEYBOARD_NAV_FILTER_COL_SUFFIX=D;exports.tableKeyboardNavigationBodyAttributes=r;exports.tableKeyboardNavigationHeaderAttributes=n;exports.tableKeyboardNavigationScopeAttributes=N;
|
package/navigation/constants.mjs
CHANGED
|
@@ -6,22 +6,24 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
const
|
|
9
|
+
const e = "data-keyboardnavlevel", a = "data-keyboardnavscope", t = "data-keyboardnavheader", A = "data-keyboardnavbody", o = "data-keyboardnavid", _ = "data-keyboardnavzone", n = "_filter", d = "k-grid-cancel-command", r = "k-grid-edit-command", c = {
|
|
10
10
|
[a]: !0
|
|
11
|
-
},
|
|
11
|
+
}, D = {
|
|
12
12
|
[t]: !0
|
|
13
|
-
},
|
|
14
|
-
[
|
|
13
|
+
}, E = {
|
|
14
|
+
[A]: !0
|
|
15
15
|
};
|
|
16
16
|
export {
|
|
17
|
-
|
|
17
|
+
d as KEYBOARD_NAV_CANCEL_BUTTON_CLASS,
|
|
18
|
+
A as KEYBOARD_NAV_DATA_BODY,
|
|
18
19
|
t as KEYBOARD_NAV_DATA_HEADER,
|
|
19
20
|
o as KEYBOARD_NAV_DATA_ID,
|
|
20
|
-
|
|
21
|
+
e as KEYBOARD_NAV_DATA_LEVEL,
|
|
21
22
|
a as KEYBOARD_NAV_DATA_SCOPE,
|
|
22
23
|
_ as KEYBOARD_NAV_DATA_ZONE,
|
|
24
|
+
r as KEYBOARD_NAV_EDIT_BUTTON_CLASS,
|
|
23
25
|
n as KEYBOARD_NAV_FILTER_COL_SUFFIX,
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
E as tableKeyboardNavigationBodyAttributes,
|
|
27
|
+
D as tableKeyboardNavigationHeaderAttributes,
|
|
28
|
+
c as tableKeyboardNavigationScopeAttributes
|
|
27
29
|
};
|
package/navigation/utils.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@progress/kendo-react-common"),
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@progress/kendo-react-common"),s=require("./constants.js"),g=(e,t,r="cell")=>`${t}_${e}_${r}`,f=e=>{if(e)return parseInt(e.getAttribute(s.KEYBOARD_NAV_DATA_LEVEL)||"",10)},d=e=>{if(!e)return;const t=e.getAttribute(s.KEYBOARD_NAV_DATA_ID);return t||void 0},i=e=>e?!!e.getAttribute(s.KEYBOARD_NAV_DATA_ID):!1,N=(e,t={level:0})=>e.querySelector(`[${s.KEYBOARD_NAV_DATA_LEVEL}='${t.level}']`),_=e=>e&&e.parentElement&&e.parentElement.closest(`[${s.KEYBOARD_NAV_DATA_LEVEL}]`),E=(e,t)=>e.querySelector(`[${s.KEYBOARD_NAV_DATA_ID}='${t}']`),I=e=>e&&e.parentElement&&e.parentElement.closest(`[${s.KEYBOARD_NAV_DATA_SCOPE}]`),b=e=>{const t=e&&e.parentElement&&e.parentElement.closest(".k-grid-edit-row");return t&&t.querySelector("."+s.KEYBOARD_NAV_CANCEL_BUTTON_CLASS)},m=e=>document.querySelector(`[aria-rowindex="${e}"] .k-grid-remove-command`),v=e=>document.querySelector(`[data-keyboardnavid="${e}"]`),D=e=>{var n;const t=e&&e.parentElement&&e.parentElement.closest(".k-table-row");let r;return(n=t==null?void 0:t.parentElement)==null||n.childNodes.forEach(l=>{if(t===l){const o=l.previousSibling;r={current:t.getAttribute("aria-rowindex"),prev:o&&o.getAttribute("aria-rowindex")}}}),r};async function $(e,t,r=5e3){const n=Date.now();if(t)for(;Date.now()-n<r;){const l=t.querySelector(e);if(l)return l;await new Promise(o=>setTimeout(o,100))}return!1}const B=async e=>{const t=e&&e.parentElement&&e.parentElement.closest(".k-grid-edit-row");return await $("."+s.KEYBOARD_NAV_EDIT_BUTTON_CLASS,t)},C=e=>e.querySelector(`[${s.KEYBOARD_NAV_DATA_HEADER}]`),y=e=>e.querySelector(`[${s.KEYBOARD_NAV_DATA_BODY}]`),K=e=>e.querySelector(".k-grid-norecords"),h=e=>{const t=e.querySelector(".k-grid-edit-cell"),r=t&&t.querySelector("input");r?r.focus():(t==null?void 0:t.firstChild).focus()},x=(e,t)=>{const{scope:r,navigationStateRef:n,contextStateRef:l}=e;if(!n.current||!r)return;const o=O(n.current.navigationMatrix),a=E(r,o);A({elementForFocus:a,contextStateRef:l,event:t})},w=(e,t={focusable:!1})=>{const r=t.focusable?c.FOCUSABLE_ELEMENTS:c.TABBABLE_ELEMENTS;return Array.from(e.querySelectorAll(r.join(",")))},R=(e,t={level:0})=>{if(!e)return[];const r=c.FOCUSABLE_ELEMENTS.map(n=>n+`[${s.KEYBOARD_NAV_DATA_LEVEL}='${t.level}']`).join(",");return Array.from(e.querySelectorAll(r))},S=(e={level:0})=>{const t=c.FOCUSABLE_ELEMENTS.map(r=>r+`[${s.KEYBOARD_NAV_DATA_LEVEL}='${e.level}']`).join(",");return r=>r.matches(t)},A=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(),i(t)&&(t.setAttribute("tabIndex","0"),n.current.activeId=d(t)),l&&i(l)&&l.setAttribute("tabIndex","-1")}},T=e=>e.current?e.current.idPrefix:"",L=(e,t,r,n,l)=>{if(!r)return[];let o=e+(l?-1:1);for(;o>=0&&o<n.length;){const a=n[o][t];if(a!==r)return[a,[o,t]];o=o+(l?-1:1)}return[]},p=(e,t,r,n,l)=>{if(!r)return[];let o=t+(l?-1:1);for(;o>=0&&o<n[e].length;){const a=n[e][o];if(a!==r)return[a,[e,o]];o=o+(l?-1:1)}return[]},u=(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,O=e=>e.flat().find(t=>t.endsWith("cell")),q=e=>e.flat().reverse().find(t=>t.endsWith("cell")),Y=(e,t)=>e[t][0],k=(e,t)=>Array.from(e[t]).reverse()[0],V=e=>e?`${e}${s.KEYBOARD_NAV_FILTER_COL_SUFFIX}`:"",P=(e,t,r)=>{let n;if(e.current&&e.current.prevNavigationIndexes){const[l,o]=e.current.prevNavigationIndexes,a=t[l];a&&a[o]===r?n=e.current.prevNavigationIndexes:n=u(t,r)}else n=u(t,r);return n},U={generateNavigatableId:g,getNavigatableId:d,getNavigatableLevel:f,getNavigatableElement:N,getClosestNavigatableElement:_,getActiveNavDataElement:E,getClosestScope:I,getHeaderElement:C,getBodyElement:y,getFocusableElements:w,getNavigatableElements:R,filterNavigatableElements:S,focusElement:A,getIdPrefix:T,isNavigatable:i,findNextIdByRowIndex:L,findNextIdByCellIndex:p,findId:u,getNextNavigationIndex:F,getFilterColumnId:V,focusFirstDataElement:x,getClosestCancelButton:b,getClosestEditButton:B,getRowAriaRowIndex:D,getRemoveButtonByAriaRowIndex:m,getTableCellByKeyboardNavId:v};exports.filterNavigatableElements=S;exports.findId=u;exports.findNextIdByCellIndex=p;exports.findNextIdByRowIndex=L;exports.focusElement=A;exports.focusFirstDataElement=x;exports.focusFirstEditor=h;exports.generateNavigatableId=g;exports.getActiveNavDataElement=E;exports.getBodyElement=y;exports.getClosestCancelButton=b;exports.getClosestEditButton=B;exports.getClosestNavigatableElement=_;exports.getClosestScope=I;exports.getCurrentIdIndexes=P;exports.getFilterColumnId=V;exports.getFirstDataCell=O;exports.getFirstRowDataCell=Y;exports.getFocusableElements=w;exports.getHeaderElement=C;exports.getIdPrefix=T;exports.getLastDataCell=q;exports.getLastRowDataCell=k;exports.getNavigatableElement=N;exports.getNavigatableElements=R;exports.getNavigatableId=d;exports.getNavigatableLevel=f;exports.getNextNavigationIndex=F;exports.getNoRecordsElement=K;exports.getRemoveButtonByAriaRowIndex=m;exports.getRowAriaRowIndex=D;exports.getTableCellByKeyboardNavId=v;exports.isNavigatable=i;exports.tableKeyboardNavigationTools=U;
|
package/navigation/utils.mjs
CHANGED
|
@@ -6,17 +6,51 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import { FOCUSABLE_ELEMENTS as
|
|
10
|
-
import { KEYBOARD_NAV_DATA_LEVEL as s, KEYBOARD_NAV_DATA_ID as
|
|
11
|
-
const
|
|
9
|
+
import { FOCUSABLE_ELEMENTS as a, TABBABLE_ELEMENTS as g } from "@progress/kendo-react-common";
|
|
10
|
+
import { KEYBOARD_NAV_DATA_LEVEL as s, KEYBOARD_NAV_DATA_ID as d, KEYBOARD_NAV_DATA_SCOPE as m, KEYBOARD_NAV_CANCEL_BUTTON_CLASS as b, KEYBOARD_NAV_DATA_HEADER as N, KEYBOARD_NAV_DATA_BODY as I, KEYBOARD_NAV_FILTER_COL_SUFFIX as v, KEYBOARD_NAV_EDIT_BUTTON_CLASS as _ } from "./constants.mjs";
|
|
11
|
+
const p = (e, t, r = "cell") => `${t}_${e}_${r}`, y = (e) => {
|
|
12
12
|
if (e)
|
|
13
13
|
return parseInt(e.getAttribute(s) || "", 10);
|
|
14
|
-
},
|
|
14
|
+
}, f = (e) => {
|
|
15
15
|
if (!e)
|
|
16
16
|
return;
|
|
17
|
-
const t = e.getAttribute(
|
|
17
|
+
const t = e.getAttribute(d);
|
|
18
18
|
return t || void 0;
|
|
19
|
-
}, u = (e) => e ? !!e.getAttribute(
|
|
19
|
+
}, u = (e) => e ? !!e.getAttribute(d) : !1, B = (e, t = { level: 0 }) => e.querySelector(`[${s}='${t.level}']`), D = (e) => e && e.parentElement && e.parentElement.closest(`[${s}]`), E = (e, t) => e.querySelector(`[${d}='${t}']`), w = (e) => e && e.parentElement && e.parentElement.closest(`[${m}]`), x = (e) => {
|
|
20
|
+
const t = e && e.parentElement && e.parentElement.closest(".k-grid-edit-row");
|
|
21
|
+
return t && t.querySelector("." + b);
|
|
22
|
+
}, C = (e) => document.querySelector(`[aria-rowindex="${e}"] .k-grid-remove-command`), S = (e) => document.querySelector(`[data-keyboardnavid="${e}"]`), T = (e) => {
|
|
23
|
+
var n;
|
|
24
|
+
const t = e && e.parentElement && e.parentElement.closest(".k-table-row");
|
|
25
|
+
let r;
|
|
26
|
+
return (n = t == null ? void 0 : t.parentElement) == null || n.childNodes.forEach((l) => {
|
|
27
|
+
if (t === l) {
|
|
28
|
+
const o = l.previousSibling;
|
|
29
|
+
r = {
|
|
30
|
+
current: t.getAttribute("aria-rowindex"),
|
|
31
|
+
prev: o && o.getAttribute("aria-rowindex")
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
}), r;
|
|
35
|
+
};
|
|
36
|
+
async function $(e, t, r = 5e3) {
|
|
37
|
+
const n = Date.now();
|
|
38
|
+
if (t)
|
|
39
|
+
for (; Date.now() - n < r; ) {
|
|
40
|
+
const l = t.querySelector(e);
|
|
41
|
+
if (l)
|
|
42
|
+
return l;
|
|
43
|
+
await new Promise((o) => setTimeout(o, 100));
|
|
44
|
+
}
|
|
45
|
+
return !1;
|
|
46
|
+
}
|
|
47
|
+
const h = async (e) => {
|
|
48
|
+
const t = e && e.parentElement && e.parentElement.closest(".k-grid-edit-row");
|
|
49
|
+
return await $("." + _, t);
|
|
50
|
+
}, R = (e) => e.querySelector(`[${N}]`), F = (e) => e.querySelector(`[${I}]`), M = (e) => e.querySelector(".k-grid-norecords"), X = (e) => {
|
|
51
|
+
const t = e.querySelector(".k-grid-edit-cell"), r = t && t.querySelector("input");
|
|
52
|
+
r ? r.focus() : (t == null ? void 0 : t.firstChild).focus();
|
|
53
|
+
}, q = (e, t) => {
|
|
20
54
|
const {
|
|
21
55
|
scope: r,
|
|
22
56
|
navigationStateRef: n,
|
|
@@ -24,29 +58,29 @@ const _ = (e, t, r = "cell") => `${t}_${e}_${r}`, D = (e) => {
|
|
|
24
58
|
} = e;
|
|
25
59
|
if (!n.current || !r)
|
|
26
60
|
return;
|
|
27
|
-
const o =
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
const r = t.focusable ?
|
|
61
|
+
const o = U(n.current.navigationMatrix), c = E(r, o);
|
|
62
|
+
A({ elementForFocus: c, contextStateRef: l, event: t });
|
|
63
|
+
}, L = (e, t = { focusable: !1 }) => {
|
|
64
|
+
const r = t.focusable ? a : g;
|
|
31
65
|
return Array.from(e.querySelectorAll(r.join(",")));
|
|
32
|
-
},
|
|
66
|
+
}, O = (e, t = { level: 0 }) => {
|
|
33
67
|
if (!e)
|
|
34
68
|
return [];
|
|
35
|
-
const r =
|
|
69
|
+
const r = a.map((n) => n + `[${s}='${t.level}']`).join(",");
|
|
36
70
|
return Array.from(e.querySelectorAll(r));
|
|
37
|
-
},
|
|
38
|
-
const t =
|
|
71
|
+
}, k = (e = { level: 0 }) => {
|
|
72
|
+
const t = a.map(
|
|
39
73
|
(r) => r + `[${s}='${e.level}']`
|
|
40
74
|
).join(",");
|
|
41
75
|
return (r) => r.matches(t);
|
|
42
|
-
},
|
|
76
|
+
}, A = (e) => {
|
|
43
77
|
const { elementForFocus: t, event: r, contextStateRef: n, prevElement: l } = e;
|
|
44
78
|
if (n.current && t && t.focus) {
|
|
45
79
|
r == null || r.preventDefault();
|
|
46
80
|
const o = t.querySelector(".k-checkbox-wrap .k-checkbox");
|
|
47
|
-
o && o.focus ? o.focus() : t.focus(), u(t) && (t.setAttribute("tabIndex", "0"), n.current.activeId =
|
|
81
|
+
o && o.focus ? o.focus() : t.focus(), u(t) && (t.setAttribute("tabIndex", "0"), n.current.activeId = f(t)), l && u(l) && l.setAttribute("tabIndex", "-1");
|
|
48
82
|
}
|
|
49
|
-
},
|
|
83
|
+
}, K = (e) => e.current ? e.current.idPrefix : "", V = (e, t, r, n, l) => {
|
|
50
84
|
if (!r)
|
|
51
85
|
return [];
|
|
52
86
|
let o = e + (l ? -1 : 1);
|
|
@@ -57,7 +91,7 @@ const _ = (e, t, r = "cell") => `${t}_${e}_${r}`, D = (e) => {
|
|
|
57
91
|
o = o + (l ? -1 : 1);
|
|
58
92
|
}
|
|
59
93
|
return [];
|
|
60
|
-
},
|
|
94
|
+
}, Y = (e, t, r, n, l) => {
|
|
61
95
|
if (!r)
|
|
62
96
|
return [];
|
|
63
97
|
let o = t + (l ? -1 : 1);
|
|
@@ -68,71 +102,82 @@ const _ = (e, t, r = "cell") => `${t}_${e}_${r}`, D = (e) => {
|
|
|
68
102
|
o = o + (l ? -1 : 1);
|
|
69
103
|
}
|
|
70
104
|
return [];
|
|
71
|
-
},
|
|
105
|
+
}, i = (e, t) => {
|
|
72
106
|
if (t) {
|
|
73
107
|
for (let r = 0; r < e.length; r++)
|
|
74
108
|
for (let n = 0; n < e[r].length; n++)
|
|
75
109
|
if (e[r][n] === t)
|
|
76
110
|
return [r, n];
|
|
77
111
|
}
|
|
78
|
-
},
|
|
112
|
+
}, P = (e) => e.current ? e.current.navigationMatrix.length : 0, U = (e) => e.flat().find((t) => t.endsWith("cell")), z = (e) => e.flat().reverse().find((t) => t.endsWith("cell")), G = (e, t) => e[t][0], J = (e, t) => Array.from(e[t]).reverse()[0], j = (e) => e ? `${e}${v}` : "", Q = (e, t, r) => {
|
|
79
113
|
let n;
|
|
80
114
|
if (e.current && e.current.prevNavigationIndexes) {
|
|
81
|
-
const [l, o] = e.current.prevNavigationIndexes;
|
|
82
|
-
|
|
115
|
+
const [l, o] = e.current.prevNavigationIndexes, c = t[l];
|
|
116
|
+
c && c[o] === r ? n = e.current.prevNavigationIndexes : n = i(t, r);
|
|
83
117
|
} else
|
|
84
|
-
n =
|
|
118
|
+
n = i(t, r);
|
|
85
119
|
return n;
|
|
86
|
-
},
|
|
87
|
-
generateNavigatableId:
|
|
88
|
-
getNavigatableId:
|
|
89
|
-
getNavigatableLevel:
|
|
90
|
-
getNavigatableElement:
|
|
91
|
-
getClosestNavigatableElement:
|
|
92
|
-
getActiveNavDataElement:
|
|
93
|
-
getClosestScope:
|
|
94
|
-
getHeaderElement:
|
|
95
|
-
getBodyElement:
|
|
96
|
-
getFocusableElements:
|
|
97
|
-
getNavigatableElements:
|
|
98
|
-
filterNavigatableElements:
|
|
99
|
-
focusElement:
|
|
100
|
-
getIdPrefix:
|
|
120
|
+
}, Z = {
|
|
121
|
+
generateNavigatableId: p,
|
|
122
|
+
getNavigatableId: f,
|
|
123
|
+
getNavigatableLevel: y,
|
|
124
|
+
getNavigatableElement: B,
|
|
125
|
+
getClosestNavigatableElement: D,
|
|
126
|
+
getActiveNavDataElement: E,
|
|
127
|
+
getClosestScope: w,
|
|
128
|
+
getHeaderElement: R,
|
|
129
|
+
getBodyElement: F,
|
|
130
|
+
getFocusableElements: L,
|
|
131
|
+
getNavigatableElements: O,
|
|
132
|
+
filterNavigatableElements: k,
|
|
133
|
+
focusElement: A,
|
|
134
|
+
getIdPrefix: K,
|
|
101
135
|
isNavigatable: u,
|
|
102
|
-
findNextIdByRowIndex:
|
|
103
|
-
findNextIdByCellIndex:
|
|
104
|
-
findId:
|
|
105
|
-
getNextNavigationIndex:
|
|
106
|
-
getFilterColumnId:
|
|
107
|
-
focusFirstDataElement:
|
|
136
|
+
findNextIdByRowIndex: V,
|
|
137
|
+
findNextIdByCellIndex: Y,
|
|
138
|
+
findId: i,
|
|
139
|
+
getNextNavigationIndex: P,
|
|
140
|
+
getFilterColumnId: j,
|
|
141
|
+
focusFirstDataElement: q,
|
|
142
|
+
getClosestCancelButton: x,
|
|
143
|
+
getClosestEditButton: h,
|
|
144
|
+
getRowAriaRowIndex: T,
|
|
145
|
+
getRemoveButtonByAriaRowIndex: C,
|
|
146
|
+
getTableCellByKeyboardNavId: S
|
|
108
147
|
};
|
|
109
148
|
export {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
149
|
+
k as filterNavigatableElements,
|
|
150
|
+
i as findId,
|
|
151
|
+
Y as findNextIdByCellIndex,
|
|
152
|
+
V as findNextIdByRowIndex,
|
|
153
|
+
A as focusElement,
|
|
154
|
+
q as focusFirstDataElement,
|
|
155
|
+
X as focusFirstEditor,
|
|
156
|
+
p as generateNavigatableId,
|
|
157
|
+
E as getActiveNavDataElement,
|
|
158
|
+
F as getBodyElement,
|
|
159
|
+
x as getClosestCancelButton,
|
|
160
|
+
h as getClosestEditButton,
|
|
161
|
+
D as getClosestNavigatableElement,
|
|
162
|
+
w as getClosestScope,
|
|
163
|
+
Q as getCurrentIdIndexes,
|
|
164
|
+
j as getFilterColumnId,
|
|
165
|
+
U as getFirstDataCell,
|
|
166
|
+
G as getFirstRowDataCell,
|
|
167
|
+
L as getFocusableElements,
|
|
168
|
+
R as getHeaderElement,
|
|
169
|
+
K as getIdPrefix,
|
|
170
|
+
z as getLastDataCell,
|
|
171
|
+
J as getLastRowDataCell,
|
|
172
|
+
B as getNavigatableElement,
|
|
173
|
+
O as getNavigatableElements,
|
|
174
|
+
f as getNavigatableId,
|
|
175
|
+
y as getNavigatableLevel,
|
|
176
|
+
P as getNextNavigationIndex,
|
|
177
|
+
M as getNoRecordsElement,
|
|
178
|
+
C as getRemoveButtonByAriaRowIndex,
|
|
179
|
+
T as getRowAriaRowIndex,
|
|
180
|
+
S as getTableCellByKeyboardNavId,
|
|
136
181
|
u as isNavigatable,
|
|
137
|
-
|
|
182
|
+
Z as tableKeyboardNavigationTools
|
|
138
183
|
};
|