@progress/kendo-react-grid 14.5.0-develop.15 → 14.5.0-develop.16
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.
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
9
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),L=require("@progress/kendo-react-popup"),s=require("@progress/kendo-react-common"),O=require("@progress/kendo-svg-icons"),k=require("../messages/index.js"),V=require("@progress/kendo-react-intl"),H=require("../utils/GridContext.js"),U=require("./adaptiveContext/GridColumnMenuAdaptiveContext.js"),j=require("./adaptiveContent/GridAdaptiveColumnMenu.js"),J=require("react-dom");function Q(o){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const u in o)if(u!=="default"){const a=Object.getOwnPropertyDescriptor(o,u);Object.defineProperty(c,u,a.get?a:{enumerable:!0,get:()=>o[u]})}}return c.default=o,Object.freeze(c)}const t=Q(B),X=[".k-columnmenu-item-content",".k-filter-menu-container"].map(o=>s.FOCUSABLE_ELEMENTS.map(c=>`${o} ${c}`)),Y=[[".k-columnmenu-item"],...X],Z=o=>{var D;const c=t.useContext(H.GridContext),[u,a]=t.useState(!1),i=t.useRef(null),d=t.useRef(null),l=t.useRef(null),E=t.useRef(0),S=s.useDocument(i),{columnMenu:f,...p}=o,{column:m,columnMenuIcon:v,navigatable:w}=o,A=V.useLocalization(),y=m.title||m.field,T=y?`${y} `:"",q="#",R=n=>{const e=s.getActiveElement(document);clearTimeout(E.current),E.current=window.setTimeout(()=>{!c.mobileMode&&e&&n.relatedTarget!==i.current&&d.current&&!d.current.contains(e)&&g()})},x=()=>{clearTimeout(E.current)},G=n=>{n.preventDefault(),u&&o.onCloseMenu&&o.onCloseMenu(),a(!u)},g=()=>{o.onCloseMenu&&o.onCloseMenu(),a(!1),!o.navigatable&&i.current&&i.current.focus()},I=n=>{var e;if(n.key==="Tab"){const r=n.target,M=r&&((e=r.closest(".k-grid"))==null?void 0:e.getElementsByClassName("k-grid-content")[0]);M&&M.scrollWidth>M.clientWidth&&r.scrollIntoView({inline:"center"})}},C=t.useMemo(()=>o.show!==void 0?o.show:u,[o.show,u]),P=n=>{var e;(e=l.current)==null||e.triggerKeyboardEvent(n)},N=n=>{var e;(e=l.current)==null||e.triggerMouseEvent(n)},F=(n,e,r)=>{r.preventDefault(),r.shiftKey?e.focusPrevious(n):e.focusNext(n)},K=(n,e,r)=>{n&&(r.preventDefault(),n.click())},W=(n,e,r)=>{r.preventDefault(),g()},_=(n,e,r)=>{e.focusElement(n)},z=n=>{!n.isAnchorClicked&&a(!1)},h=t.useCallback((n,e)=>{const r=[];if(!e||typeof e!="object")return!1;if(Array.isArray(e.filters)){for(const M of e.filters)if(h(n,M))return!0}return"field"in e&&typeof e.field=="string"&&r.push(e.field),r.includes(n)},[]),b=t.useCallback((n,e)=>!e||!Array.isArray(e)?!1:e.some(r=>r.field===n),[]),$=t.useMemo(()=>m.field&&(h(m.field,c.filter)||b(m.field,c.group)),[m.field,c.filter,c.group,h,b]);return t.useEffect(()=>(C&&d.current&&(l.current=new s.Navigation({tabIndex:0,root:d,selectors:Y,keyboardEvents:{keydown:{Tab:F,Enter:K,Escape:W}},mouseEvents:{mousedown:_}}),l.current.focusElement(l.current.first,null)),()=>{l.current&&(l.current=null)}),[C]),t.createElement(t.Fragment,null,t.createElement("a",{className:s.classNames("k-grid-header-menu k-grid-column-menu",{"k-active":$}),ref:i,onClick:G,onKeyDown:I,href:q,tabIndex:w?-1:void 0,"aria-label":`${w?"":T}${A.toLanguageString(k.columnMenu,k.messages[k.columnMenu])}`},v?t.createElement(s.IconWrap,{name:v.name,icon:v}):t.createElement(s.IconWrap,{name:"more-vertical",icon:O.moreVerticalIcon})),t.createElement(U.GridColumnMenuAdaptiveProvider,null,c.mobileMode?t.createElement(t.Fragment,null,J.createPortal(t.createElement(j.GridAdaptiveColumnMenu,{computedShow:C,ColumnMenu:f,closeMenu:g},f&&t.createElement(f,{...p,onCloseMenu:g})),(D=S())==null?void 0:D.body)):t.createElement(L.Popup,{anchor:i.current,show:C,popupClass:"k-grid-columnmenu-popup",onMouseDownOutside:z},t.createElement("div",{ref:d,onBlur:R,onFocus:x,onMouseDown:N,onKeyDown:P,className:"k-column-menu k-column-menu-md"},f&&t.createElement(f,{...p,onCloseMenu:g})))))};exports.GridColumnMenuWrapper=Z;
|
|
@@ -6,54 +6,54 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
9
|
+
import * as o from "react";
|
|
10
10
|
import { Popup as V } from "@progress/kendo-react-popup";
|
|
11
|
-
import { useDocument as _, Navigation as H, classNames as
|
|
12
|
-
import { moreVerticalIcon as
|
|
11
|
+
import { useDocument as _, Navigation as H, classNames as U, IconWrap as D, FOCUSABLE_ELEMENTS as q, getActiveElement as J } from "@progress/kendo-react-common";
|
|
12
|
+
import { moreVerticalIcon as Q } from "@progress/kendo-svg-icons";
|
|
13
13
|
import { columnMenu as b, messages as X } from "../messages/index.mjs";
|
|
14
14
|
import { useLocalization as Y } from "@progress/kendo-react-intl";
|
|
15
15
|
import { GridContext as Z } from "../utils/GridContext.mjs";
|
|
16
16
|
import { GridColumnMenuAdaptiveProvider as O } from "./adaptiveContext/GridColumnMenuAdaptiveContext.mjs";
|
|
17
17
|
import { GridAdaptiveColumnMenu as j } from "./adaptiveContent/GridAdaptiveColumnMenu.mjs";
|
|
18
18
|
import ee from "react-dom";
|
|
19
|
-
const ne = [".k-columnmenu-item-content", ".k-filter-menu-container"].map((r) =>
|
|
19
|
+
const ne = [".k-columnmenu-item-content", ".k-filter-menu-container"].map((r) => q.map((c) => `${r} ${c}`)), oe = [[".k-columnmenu-item"], ...ne], de = (r) => {
|
|
20
20
|
var y;
|
|
21
|
-
const c =
|
|
22
|
-
const e =
|
|
21
|
+
const c = o.useContext(Z), [d, M] = o.useState(!1), u = o.useRef(null), a = o.useRef(null), l = o.useRef(null), h = o.useRef(0), A = _(u), { columnMenu: i, ...C } = r, { column: s, columnMenuIcon: g, navigatable: p } = r, T = Y(), w = s.title || s.field, S = w ? `${w} ` : "", x = "#", N = (n) => {
|
|
22
|
+
const e = J(document);
|
|
23
23
|
clearTimeout(h.current), h.current = window.setTimeout(() => {
|
|
24
|
-
!c.mobileMode && e && n.relatedTarget !==
|
|
24
|
+
!c.mobileMode && e && n.relatedTarget !== u.current && a.current && !a.current.contains(e) && m();
|
|
25
25
|
});
|
|
26
|
-
},
|
|
26
|
+
}, F = () => {
|
|
27
27
|
clearTimeout(h.current);
|
|
28
28
|
}, I = (n) => {
|
|
29
29
|
n.preventDefault(), d && r.onCloseMenu && r.onCloseMenu(), M(!d);
|
|
30
30
|
}, m = () => {
|
|
31
|
-
r.onCloseMenu && r.onCloseMenu(), M(!1), !r.navigatable &&
|
|
31
|
+
r.onCloseMenu && r.onCloseMenu(), M(!1), !r.navigatable && u.current && u.current.focus();
|
|
32
32
|
}, K = (n) => {
|
|
33
33
|
var e;
|
|
34
34
|
if (n.key === "Tab") {
|
|
35
|
-
const
|
|
36
|
-
f && f.scrollWidth > f.clientWidth &&
|
|
35
|
+
const t = n.target, f = t && ((e = t.closest(".k-grid")) == null ? void 0 : e.getElementsByClassName("k-grid-content")[0]);
|
|
36
|
+
f && f.scrollWidth > f.clientWidth && t.scrollIntoView({ inline: "center" });
|
|
37
37
|
}
|
|
38
|
-
}, E =
|
|
38
|
+
}, E = o.useMemo(() => r.show !== void 0 ? r.show : d, [r.show, d]), R = (n) => {
|
|
39
39
|
var e;
|
|
40
40
|
(e = l.current) == null || e.triggerKeyboardEvent(n);
|
|
41
|
-
},
|
|
41
|
+
}, G = (n) => {
|
|
42
42
|
var e;
|
|
43
43
|
(e = l.current) == null || e.triggerMouseEvent(n);
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
},
|
|
47
|
-
n && (
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
},
|
|
44
|
+
}, P = (n, e, t) => {
|
|
45
|
+
t.preventDefault(), t.shiftKey ? e.focusPrevious(n) : e.focusNext(n);
|
|
46
|
+
}, $ = (n, e, t) => {
|
|
47
|
+
n && (t.preventDefault(), n.click());
|
|
48
|
+
}, z = (n, e, t) => {
|
|
49
|
+
t.preventDefault(), m();
|
|
50
|
+
}, B = (n, e, t) => {
|
|
51
51
|
e.focusElement(n);
|
|
52
52
|
}, L = (n) => {
|
|
53
53
|
!n.isAnchorClicked && M(!1);
|
|
54
|
-
}, v =
|
|
54
|
+
}, v = o.useCallback(
|
|
55
55
|
(n, e) => {
|
|
56
|
-
const
|
|
56
|
+
const t = [];
|
|
57
57
|
if (!e || typeof e != "object")
|
|
58
58
|
return !1;
|
|
59
59
|
if (Array.isArray(e.filters)) {
|
|
@@ -61,67 +61,67 @@ const ne = [".k-columnmenu-item-content", ".k-filter-menu-container"].map((r) =>
|
|
|
61
61
|
if (v(n, f))
|
|
62
62
|
return !0;
|
|
63
63
|
}
|
|
64
|
-
return "field" in e && typeof e.field == "string" &&
|
|
64
|
+
return "field" in e && typeof e.field == "string" && t.push(e.field), t.includes(n);
|
|
65
65
|
},
|
|
66
66
|
[]
|
|
67
|
-
), k =
|
|
68
|
-
return
|
|
67
|
+
), k = o.useCallback((n, e) => !e || !Array.isArray(e) ? !1 : e.some((t) => t.field === n), []), W = o.useMemo(() => s.field && (v(s.field, c.filter) || k(s.field, c.group)), [s.field, c.filter, c.group, v, k]);
|
|
68
|
+
return o.useEffect(() => (E && a.current && (l.current = new H({
|
|
69
69
|
tabIndex: 0,
|
|
70
|
-
root:
|
|
71
|
-
selectors:
|
|
70
|
+
root: a,
|
|
71
|
+
selectors: oe,
|
|
72
72
|
keyboardEvents: {
|
|
73
|
-
keydown: { Tab:
|
|
73
|
+
keydown: { Tab: P, Enter: $, Escape: z }
|
|
74
74
|
},
|
|
75
|
-
mouseEvents: { mousedown:
|
|
75
|
+
mouseEvents: { mousedown: B }
|
|
76
76
|
}), l.current.focusElement(l.current.first, null)), () => {
|
|
77
77
|
l.current && (l.current = null);
|
|
78
|
-
}), [E]), /* @__PURE__ */
|
|
78
|
+
}), [E]), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
|
|
79
79
|
"a",
|
|
80
80
|
{
|
|
81
|
-
className:
|
|
81
|
+
className: U("k-grid-header-menu k-grid-column-menu", {
|
|
82
82
|
"k-active": W
|
|
83
83
|
}),
|
|
84
|
-
ref:
|
|
84
|
+
ref: u,
|
|
85
85
|
onClick: I,
|
|
86
86
|
onKeyDown: K,
|
|
87
87
|
href: x,
|
|
88
|
-
tabIndex:
|
|
89
|
-
"aria-label": `${
|
|
88
|
+
tabIndex: p ? -1 : void 0,
|
|
89
|
+
"aria-label": `${p ? "" : S}${T.toLanguageString(
|
|
90
90
|
b,
|
|
91
91
|
X[b]
|
|
92
92
|
)}`
|
|
93
93
|
},
|
|
94
|
-
g ? /* @__PURE__ */
|
|
95
|
-
), /* @__PURE__ */
|
|
96
|
-
/* @__PURE__ */
|
|
94
|
+
g ? /* @__PURE__ */ o.createElement(D, { name: g.name, icon: g }) : /* @__PURE__ */ o.createElement(D, { name: "more-vertical", icon: Q })
|
|
95
|
+
), /* @__PURE__ */ o.createElement(O, null, c.mobileMode ? /* @__PURE__ */ o.createElement(o.Fragment, null, ee.createPortal(
|
|
96
|
+
/* @__PURE__ */ o.createElement(
|
|
97
97
|
j,
|
|
98
98
|
{
|
|
99
99
|
computedShow: E,
|
|
100
|
-
ColumnMenu:
|
|
100
|
+
ColumnMenu: i,
|
|
101
101
|
closeMenu: m
|
|
102
102
|
},
|
|
103
|
-
|
|
103
|
+
i && /* @__PURE__ */ o.createElement(i, { ...C, onCloseMenu: m })
|
|
104
104
|
),
|
|
105
105
|
(y = A()) == null ? void 0 : y.body
|
|
106
|
-
)) : /* @__PURE__ */
|
|
106
|
+
)) : /* @__PURE__ */ o.createElement(
|
|
107
107
|
V,
|
|
108
108
|
{
|
|
109
|
-
anchor:
|
|
109
|
+
anchor: u.current,
|
|
110
110
|
show: E,
|
|
111
111
|
popupClass: "k-grid-columnmenu-popup",
|
|
112
112
|
onMouseDownOutside: L
|
|
113
113
|
},
|
|
114
|
-
/* @__PURE__ */
|
|
114
|
+
/* @__PURE__ */ o.createElement(
|
|
115
115
|
"div",
|
|
116
116
|
{
|
|
117
|
-
ref:
|
|
117
|
+
ref: a,
|
|
118
118
|
onBlur: N,
|
|
119
|
-
onFocus:
|
|
120
|
-
onMouseDown:
|
|
119
|
+
onFocus: F,
|
|
120
|
+
onMouseDown: G,
|
|
121
121
|
onKeyDown: R,
|
|
122
122
|
className: "k-column-menu k-column-menu-md"
|
|
123
123
|
},
|
|
124
|
-
|
|
124
|
+
i && /* @__PURE__ */ o.createElement(i, { ...C, onCloseMenu: m })
|
|
125
125
|
)
|
|
126
126
|
)));
|
|
127
127
|
};
|