@progress/kendo-react-grid 15.0.1-develop.1 → 15.0.1-develop.10
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/VirtualScroll.js +1 -1
- package/VirtualScroll.mjs +8 -8
- package/dist/cdn/js/kendo-react-grid.js +1 -1
- package/header/GroupPanel.js +1 -1
- package/header/GroupPanel.mjs +14 -14
- package/interfaces/GridColumnState.d.ts +4 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +17 -17
- package/stacked/StackedModeRow.js +1 -1
- package/stacked/StackedModeRow.mjs +9 -9
- package/toolbar-tools/GridToolbarColumnsChooser.js +1 -1
- package/toolbar-tools/GridToolbarColumnsChooser.mjs +141 -130
- package/toolbar-tools/GridToolbarGroup.js +1 -1
- package/toolbar-tools/GridToolbarGroup.mjs +13 -11
- package/utils/index.js +1 -1
- package/utils/index.mjs +15 -14
package/header/GroupPanel.js
CHANGED
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),P=require("../drag/GroupingIndicator.js"),C=require("@progress/kendo-react-intl"),
|
|
9
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),P=require("../drag/GroupingIndicator.js"),C=require("@progress/kendo-react-intl"),i=require("../messages/index.js"),G=require("../utils/GridContext.js");function v(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const s=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(n,a,s.get?s:{enumerable:!0,get:()=>t[a]})}}return n.default=t,Object.freeze(n)}const l=v(b),R=t=>{const n=l.useContext(G.GridContext),a=(o,e)=>{const r=t.group.slice();r.splice(e,1),n.groupChange(r,o)},s=(o,e,r,c)=>{const f=Object.assign({},r,{dir:c}),d=t.group.slice();d.splice(e,1,f),n.groupChange(d,o)},u=C.useLocalization(),p=t.group||[],m=o=>{const e=t.columns.find(c=>c.field===o&&c.isAccessible!==!1),r=e&&(e.title||e.field);return r===void 0?o:r},g=p.map((o,e)=>l.createElement(P.GroupingIndicator,{key:e,index:e,dir:o.dir||"asc",title:m(o.field),onRemove:r=>{a(r,e)},onSortChange:(r,c)=>{s(r,e,o,c)},onPress:n.dragLogicRef.current.pressHandler,onDrag:n.dragLogicRef.current.dragHandler,onRelease:n.dragLogicRef.current.releaseHandler,onContextMenu:n.onContextMenu}));return l.createElement("div",{ref:n.dragLogicRef.current.refGroupPanelDiv,className:"k-grouping-header",role:"toolbar","aria-label":u.toLanguageString(i.groupPanelAriaLabel,i.messages[i.groupPanelAriaLabel]),"aria-controls":t.ariaControls||""},l.createElement("div",{className:"k-chip-list",role:"none"},g),l.createElement("div",{className:"k-grouping-drop-container"},!g.length&&u.toLanguageString(i.groupPanelEmpty,i.messages[i.groupPanelEmpty])," "))};exports.GroupPanel=R;
|
package/header/GroupPanel.mjs
CHANGED
|
@@ -11,17 +11,17 @@ import { GroupingIndicator as G } from "../drag/GroupingIndicator.mjs";
|
|
|
11
11
|
import { useLocalization as L } from "@progress/kendo-react-intl";
|
|
12
12
|
import { groupPanelAriaLabel as g, messages as u, groupPanelEmpty as m } from "../messages/index.mjs";
|
|
13
13
|
import { GridContext as R } from "../utils/GridContext.mjs";
|
|
14
|
-
const k = (
|
|
14
|
+
const k = (a) => {
|
|
15
15
|
const n = i.useContext(R), p = (r, e) => {
|
|
16
|
-
const o =
|
|
16
|
+
const o = a.group.slice();
|
|
17
17
|
o.splice(e, 1), n.groupChange(o, r);
|
|
18
|
-
}, d = (r, e, o,
|
|
19
|
-
const v = Object.assign({}, o, { dir:
|
|
20
|
-
|
|
21
|
-
},
|
|
22
|
-
const e =
|
|
18
|
+
}, d = (r, e, o, t) => {
|
|
19
|
+
const v = Object.assign({}, o, { dir: t }), c = a.group.slice();
|
|
20
|
+
c.splice(e, 1, v), n.groupChange(c, r);
|
|
21
|
+
}, s = L(), f = a.group || [], C = (r) => {
|
|
22
|
+
const e = a.columns.find((t) => t.field === r && t.isAccessible !== !1), o = e && (e.title || e.field);
|
|
23
23
|
return o === void 0 ? r : o;
|
|
24
|
-
},
|
|
24
|
+
}, l = f.map((r, e) => /* @__PURE__ */ i.createElement(
|
|
25
25
|
G,
|
|
26
26
|
{
|
|
27
27
|
key: e,
|
|
@@ -31,8 +31,8 @@ const k = (t) => {
|
|
|
31
31
|
onRemove: (o) => {
|
|
32
32
|
p(o, e);
|
|
33
33
|
},
|
|
34
|
-
onSortChange: (o,
|
|
35
|
-
d(o, e, r,
|
|
34
|
+
onSortChange: (o, t) => {
|
|
35
|
+
d(o, e, r, t);
|
|
36
36
|
},
|
|
37
37
|
onPress: n.dragLogicRef.current.pressHandler,
|
|
38
38
|
onDrag: n.dragLogicRef.current.dragHandler,
|
|
@@ -46,11 +46,11 @@ const k = (t) => {
|
|
|
46
46
|
ref: n.dragLogicRef.current.refGroupPanelDiv,
|
|
47
47
|
className: "k-grouping-header",
|
|
48
48
|
role: "toolbar",
|
|
49
|
-
"aria-label":
|
|
50
|
-
"aria-controls":
|
|
49
|
+
"aria-label": s.toLanguageString(g, u[g]),
|
|
50
|
+
"aria-controls": a.ariaControls || ""
|
|
51
51
|
},
|
|
52
|
-
/* @__PURE__ */ i.createElement("div", { className: "k-chip-list", role: "none" },
|
|
53
|
-
/* @__PURE__ */ i.createElement("div", { className: "k-grouping-drop-container" }, !
|
|
52
|
+
/* @__PURE__ */ i.createElement("div", { className: "k-chip-list", role: "none" }, l),
|
|
53
|
+
/* @__PURE__ */ i.createElement("div", { className: "k-grouping-drop-container" }, !l.length && s.toLanguageString(m, u[m]), " ")
|
|
54
54
|
);
|
|
55
55
|
};
|
|
56
56
|
export {
|
package/package-metadata.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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-grid",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-grid",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1780565101,version:"15.0.1-develop.10",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
|
|
|
7
7
|
productName: 'KendoReact',
|
|
8
8
|
productCode: 'KENDOUIREACT',
|
|
9
9
|
productCodes: ['KENDOUIREACT'],
|
|
10
|
-
publishDate:
|
|
11
|
-
version: '15.0.1-develop.
|
|
10
|
+
publishDate: 1780565101,
|
|
11
|
+
version: '15.0.1-develop.10',
|
|
12
12
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
|
|
13
13
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-grid",
|
|
3
|
-
"version": "15.0.1-develop.
|
|
3
|
+
"version": "15.0.1-develop.10",
|
|
4
4
|
"description": "React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -30,21 +30,21 @@
|
|
|
30
30
|
"@progress/kendo-drawing": "^1.21.2",
|
|
31
31
|
"@progress/kendo-file-saver": "^1.1.1",
|
|
32
32
|
"@progress/kendo-licensing": "^1.7.2",
|
|
33
|
-
"@progress/kendo-react-animation": "15.0.1-develop.
|
|
34
|
-
"@progress/kendo-react-buttons": "15.0.1-develop.
|
|
35
|
-
"@progress/kendo-react-common": "15.0.1-develop.
|
|
36
|
-
"@progress/kendo-react-data-tools": "15.0.1-develop.
|
|
37
|
-
"@progress/kendo-react-dateinputs": "15.0.1-develop.
|
|
38
|
-
"@progress/kendo-react-indicators": "15.0.1-develop.
|
|
39
|
-
"@progress/kendo-react-form": "15.0.1-develop.
|
|
40
|
-
"@progress/kendo-react-labels": "15.0.1-develop.
|
|
41
|
-
"@progress/kendo-react-dialogs": "15.0.1-develop.
|
|
42
|
-
"@progress/kendo-react-dropdowns": "15.0.1-develop.
|
|
43
|
-
"@progress/kendo-react-inputs": "15.0.1-develop.
|
|
44
|
-
"@progress/kendo-react-intl": "15.0.1-develop.
|
|
45
|
-
"@progress/kendo-react-popup": "15.0.1-develop.
|
|
46
|
-
"@progress/kendo-react-layout": "15.0.1-develop.
|
|
47
|
-
"@progress/kendo-react-conversational-ui": "15.0.1-develop.
|
|
33
|
+
"@progress/kendo-react-animation": "15.0.1-develop.10",
|
|
34
|
+
"@progress/kendo-react-buttons": "15.0.1-develop.10",
|
|
35
|
+
"@progress/kendo-react-common": "15.0.1-develop.10",
|
|
36
|
+
"@progress/kendo-react-data-tools": "15.0.1-develop.10",
|
|
37
|
+
"@progress/kendo-react-dateinputs": "15.0.1-develop.10",
|
|
38
|
+
"@progress/kendo-react-indicators": "15.0.1-develop.10",
|
|
39
|
+
"@progress/kendo-react-form": "15.0.1-develop.10",
|
|
40
|
+
"@progress/kendo-react-labels": "15.0.1-develop.10",
|
|
41
|
+
"@progress/kendo-react-dialogs": "15.0.1-develop.10",
|
|
42
|
+
"@progress/kendo-react-dropdowns": "15.0.1-develop.10",
|
|
43
|
+
"@progress/kendo-react-inputs": "15.0.1-develop.10",
|
|
44
|
+
"@progress/kendo-react-intl": "15.0.1-develop.10",
|
|
45
|
+
"@progress/kendo-react-popup": "15.0.1-develop.10",
|
|
46
|
+
"@progress/kendo-react-layout": "15.0.1-develop.10",
|
|
47
|
+
"@progress/kendo-react-conversational-ui": "15.0.1-develop.10",
|
|
48
48
|
"@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
|
|
49
49
|
"react": "^18.0.0 || ^19.0.0",
|
|
50
50
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
"package": {
|
|
149
149
|
"productName": "KendoReact",
|
|
150
150
|
"productCode": "KENDOUIREACT",
|
|
151
|
-
"publishDate":
|
|
151
|
+
"publishDate": 1780565101,
|
|
152
152
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
153
153
|
}
|
|
154
154
|
},
|
|
@@ -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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),L=require("../cells/groupcell/GridGroupCellToggle.js"),V=require("../rows/GridRow.js"),z=require("./GridStackedRow.js");function H(e){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const u=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(c,s,u.get?u:{enumerable:!0,get:()=>e[s]})}}return c.default=e,Object.freeze(c)}const t=H(B),U=({item:e,rowId:c,dataIndex:s,idPrefix:u,ariaRowIndex:f,absoluteRowIndex:y,isAltRow:k,isHidden:h,isRowReorderable:j,rowHeight:O,rows:R,leafColumns:p,groupLevelCount:b,stackedLayoutSettings:w,cells:F,editMode:x,isSelected:S,isHighlighted:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),L=require("../cells/groupcell/GridGroupCellToggle.js"),V=require("../rows/GridRow.js"),z=require("./GridStackedRow.js");function H(e){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const u=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(c,s,u.get?u:{enumerable:!0,get:()=>e[s]})}}return c.default=e,Object.freeze(c)}const t=H(B),U=({item:e,rowId:c,dataIndex:s,idPrefix:u,ariaRowIndex:f,absoluteRowIndex:y,isAltRow:k,isHidden:h,isRowReorderable:j,rowHeight:O,rows:R,leafColumns:p,groupLevelCount:b,stackedLayoutSettings:w,cells:F,editMode:x,isSelected:S,isHighlighted:A,isInEdit:v,preparedCells:D,showDetailToggle:M,isDetailExpanded:_,detailExpandField:q,isPinned:I})=>{var C,G,$;if(e.rowType==="data")return t.createElement(z.GridStackedRow,{key:c,dataItem:e.dataItem,columns:p,stackedLayoutSettings:w,isAltRow:k,isSelected:S,isInEdit:v,cells:F,dataIndex:s,idPrefix:u,ariaRowIndex:f,absoluteRowIndex:y,groupLevel:b,preparedCells:D,editMode:x,showDetailToggle:M,isDetailExpanded:_,detailExpandField:q,isPinned:I});const P=b+1,E=e.level||0,T=Math.max(1,P-E),N=Array.from({length:E},(d,r)=>t.createElement("td",{key:`group-cell-${c}-${r}`,className:"k-table-group-td k-group-cell k-table-td"}));let m;if(e.rowType==="groupHeader"){const d=(C=e.dataItem)==null?void 0:C.field,r=(G=e.dataItem)==null?void 0:G.value,g=d!==void 0?(()=>{const l=String(d),n=p.find(o=>o.field===l&&o.isAccessible!==!1),i=n==null?void 0:n.title;return typeof i=="string"&&i.length?i:l})():void 0;let a="";if(d!==void 0){let l;r instanceof Date?l=r.toString():l=String(r),a=`${g}: ${l}`}else r instanceof Date?a=r.toString():r!==void 0&&(a=String(r));m=t.createElement(t.Fragment,null,N,t.createElement("td",{className:"k-table-td",colSpan:T,role:"gridcell","aria-expanded":e.expanded},t.createElement("p",{className:"k-reset"},t.createElement(L.GridGroupCellToggle,{id:"",dataItem:e.dataItem,dataIndex:e.dataIndex,field:"value",expanded:e.expanded,group:e.group,columnPosition:{},ariaColumnIndex:1,isSelected:!1}),t.createElement("span",{className:"k-value"},a))))}else{const d=p.filter(a=>{const l=!!a._type,n=a.isAccessible===!1;return!a.hidden&&!l&&!n&&(a.columnType==="data"||a.columnType===void 0)}),r=($=e.dataItem)==null?void 0:$.aggregates,g=d.map(a=>{const l=a.field;if(!l||!r)return null;const n=r[l];if(!n||typeof n!="object")return null;const i=Object.keys(n).filter(o=>n[o]!==void 0&&n[o]!==null).map(o=>`${o.length?`${o.charAt(0).toUpperCase()}${o.slice(1)}`:o}: ${String(n[o])}`);return i.length===0?null:t.createElement("div",{key:`agg-${c}-${l}`,className:"k-grid-template-column"},t.createElement("p",{className:"k-grid-template-column-header"},a.title||l),t.createElement("p",{className:"k-reset"},i.join(", ")))}).filter(Boolean);if(e.rowType==="groupFooter"&&g.length===0)return t.createElement(t.Fragment,{key:c});m=t.createElement(t.Fragment,null,N,t.createElement("td",{className:"k-table-td",colSpan:T},t.createElement("div",{className:"k-grid-column-template"},g)))}return t.createElement(V.GridRow,{key:c,dataItem:e.dataItem,isAltRow:k,isInEdit:v,rowType:e.rowType,isRowReorderable:j,isHidden:h,onClick:null,onDoubleClick:null,rowHeight:O,ariaRowIndex:f,absoluteRowIndex:y,dataIndex:s,isSelected:S,isHighlighted:A,rows:R},m)};exports.StackedModeRow=U;
|
|
@@ -61,15 +61,15 @@ const K = ({
|
|
|
61
61
|
isPinned: V
|
|
62
62
|
}
|
|
63
63
|
);
|
|
64
|
-
const _ = y + 1, S = t.level || 0, b = Math.max(1, _ - S), N = Array.from({ length: S }, (
|
|
64
|
+
const _ = y + 1, S = t.level || 0, b = Math.max(1, _ - S), N = Array.from({ length: S }, (s, r) => /* @__PURE__ */ e.createElement("td", { key: `group-cell-${d}-${r}`, className: "k-table-group-td k-group-cell k-table-td" }));
|
|
65
65
|
let g;
|
|
66
66
|
if (t.rowType === "groupHeader") {
|
|
67
|
-
const
|
|
68
|
-
const l = String(
|
|
69
|
-
return typeof
|
|
67
|
+
const s = (T = t.dataItem) == null ? void 0 : T.field, r = ($ = t.dataItem) == null ? void 0 : $.value, i = s !== void 0 ? (() => {
|
|
68
|
+
const l = String(s), n = p.find((o) => o.field === l && o.isAccessible !== !1), c = n == null ? void 0 : n.title;
|
|
69
|
+
return typeof c == "string" && c.length ? c : l;
|
|
70
70
|
})() : void 0;
|
|
71
71
|
let a = "";
|
|
72
|
-
if (
|
|
72
|
+
if (s !== void 0) {
|
|
73
73
|
let l;
|
|
74
74
|
r instanceof Date ? l = r.toString() : l = String(r), a = `${i}: ${l}`;
|
|
75
75
|
} else r instanceof Date ? a = r.toString() : r !== void 0 && (a = String(r));
|
|
@@ -88,18 +88,18 @@ const K = ({
|
|
|
88
88
|
}
|
|
89
89
|
), /* @__PURE__ */ e.createElement("span", { className: "k-value" }, a))));
|
|
90
90
|
} else {
|
|
91
|
-
const
|
|
91
|
+
const s = p.filter((a) => {
|
|
92
92
|
const l = !!a._type, n = a.isAccessible === !1;
|
|
93
93
|
return !a.hidden && !l && !n && (a.columnType === "data" || a.columnType === void 0);
|
|
94
|
-
}), r = (C = t.dataItem) == null ? void 0 : C.aggregates, i =
|
|
94
|
+
}), r = (C = t.dataItem) == null ? void 0 : C.aggregates, i = s.map((a) => {
|
|
95
95
|
const l = a.field;
|
|
96
96
|
if (!l || !r)
|
|
97
97
|
return null;
|
|
98
98
|
const n = r[l];
|
|
99
99
|
if (!n || typeof n != "object")
|
|
100
100
|
return null;
|
|
101
|
-
const
|
|
102
|
-
return
|
|
101
|
+
const c = Object.keys(n).filter((o) => n[o] !== void 0 && n[o] !== null).map((o) => `${o.length ? `${o.charAt(0).toUpperCase()}${o.slice(1)}` : o}: ${String(n[o])}`);
|
|
102
|
+
return c.length === 0 ? null : /* @__PURE__ */ e.createElement("div", { key: `agg-${d}-${l}`, className: "k-grid-template-column" }, /* @__PURE__ */ e.createElement("p", { className: "k-grid-template-column-header" }, a.title || l), /* @__PURE__ */ e.createElement("p", { className: "k-reset" }, c.join(", ")));
|
|
103
103
|
}).filter(Boolean);
|
|
104
104
|
if (t.rowType === "groupFooter" && i.length === 0)
|
|
105
105
|
return /* @__PURE__ */ e.createElement(e.Fragment, { key: d });
|
|
@@ -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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const le=require("react"),re=require("react-dom"),T=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-react-common"),E=require("@progress/kendo-react-inputs"),_=require("@progress/kendo-svg-icons"),se=require("../columnMenu/GridColumnMenuItemContent.js"),l=require("../messages/index.js"),ce=require("../utils/GridContext.js"),ae=require("@progress/kendo-react-intl"),ue=require("./adaptiveContent/GridAdaptiveToolbarColumnChooser.js"),ie=require("@progress/kendo-react-popup"),H=require("@progress/kendo-react-indicators"),me=require("./adaptiveContext/GridToolbarAdaptiveContext.js");function de(r){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(c,n,s.get?s:{enumerable:!0,get:()=>r[n]})}}return c.default=r,Object.freeze(c)}const e=de(le),V=r=>{const c={};for(const n of r)c[n.id||""]=!n.hidden;return c},$=r=>{var F,K;const{onCloseMenu:c}=r,n=e.useContext(ce.GridContext),s=n.columnsState,M=n.onColumnsStateChange,b=s||[],[y,k]=e.useState(!1),[d,W]=e.useState(""),[w,p]=e.useState(!1),[a,S]=e.useState(()=>V(b)),J=e.useMemo(()=>b.map(t=>`${t.id}:${!!t.hidden}`).join(","),[b]),B=e.useMemo(()=>V(b),[J]);e.useEffect(()=>{w||S(B)},[w,B]);const i=e.useRef(null),R=e.useRef(null),q=e.useRef(null),A=e.useRef(0),m=ae.useLocalization(),Q=f.useDocument(i),x=e.useMemo(()=>(s==null?void 0:s.filter(t=>{var o;return(o=t.title||t.field)==null?void 0:o.toLowerCase().includes(d.toLowerCase())}))||[],[s,d]),g=e.useMemo(()=>Object.values(a).filter(t=>t).length,[a]),C=e.useMemo(()=>g===(s==null?void 0:s.length),[s,g]),D=e.useCallback(t=>{t.preventDefault();const u=(h=>(h==null?void 0:h.map(v=>({...v,hidden:!a[v.id||""]})))||[])(s);M&&M(u),c==null||c(),k(!1),p(!1)},[s,M,c,a]),N=t=>{t.preventDefault(),S(B),p(!1)},G=e.useCallback(()=>{S(t=>{const o={...t};return Object.keys(o).forEach((h,v)=>o[h]=C&&v===0?!0:!C),o}),p(!0)},[C]),O=e.useCallback((t,o)=>{S(u=>({...u,[o||""]:t})),p(!0)},[]),L=t=>{W(String(t.target.value))},U=t=>{t.preventDefault(),k(!y)},I=e.useMemo(()=>r.show!==void 0?r.show:y,[r.show,y]),P=()=>{var t;c&&c(),k(!1),i.current&&((t=i.current.element)==null||t.focus())},X=t=>{const o=f.getActiveElement(document);clearTimeout(A.current),A.current=window.setTimeout(()=>{!n.mobileMode&&o&&t.relatedTarget!==i.current&&R.current&&!R.current.contains(o)&&P()})},Y=()=>{clearTimeout(A.current)},{onFocus:Z,onBlur:ee}=f.useAsyncFocusBlur({onFocus:t=>Y(),onBlur:t=>X(t)}),te=t=>{var o;(o=q.current)==null||o.triggerMouseEvent(t)},oe=t=>{var o;(o=q.current)==null||o.triggerKeyboardEvent(t)},ne=t=>{!t.isAnchorClicked&&k(!1)},j=e.createElement(se.GridColumnMenuItemContent,{show:!0},e.createElement("form",{onSubmit:D,onReset:N,className:"k-filter-menu"},e.createElement("div",{className:"k-filter-menu-container"},e.createElement(E.TextBox,{className:"k-searchbox",value:d,onChange:L,size:n.mobileMode?"large":"medium",prefix:()=>e.createElement(E.InputPrefix,null,e.createElement(f.IconWrap,{name:"search",icon:_.searchIcon}))}),e.createElement("ul",{className:"k-reset k-multicheck-wrap"},!d&&e.createElement("li",{className:"k-item k-check-all-wrap"},e.createElement(E.Checkbox,{checked:C,onChange:G,label:m.toLanguageString(l.filterSelectAll,l.messages[l.filterSelectAll]),size:n.mobileMode?"large":"medium"})),x.map(t=>e.createElement("li",{key:t.id,className:"k-item"},e.createElement(E.Checkbox,{disabled:a[t.id||""]&&g===1,checked:a[t.id||""],onChange:o=>{var u;return O(!!((u=o.target.element)!=null&&u.checked),t.id)},label:t.title||t.field,size:n.mobileMode?"large":"medium"})))),e.createElement("div",{className:"k-filter-selected-items"},g," ",m.toLanguageString(l.columnMenuColumnChooserSelectedItems,l.messages[l.columnMenuColumnChooserSelectedItems])),e.createElement("div",{className:"k-actions k-actions-start k-actions-horizontal"},e.createElement(T.Button,{type:"submit",themeColor:"primary"},m.toLanguageString(l.filterApplyButton,l.messages[l.filterApplyButton])),e.createElement(T.Button,{type:"reset"},m.toLanguageString(l.filterResetButton,l.messages[l.filterResetButton])))))),z=e.createElement(T.Button,{ref:i,togglable:!0,selected:I,svgIcon:r.svgIcon?r.svgIcon:r.icon?void 0:_.columnsIcon,icon:r.icon,size:n.mobileMode?"large":"medium",className:f.classNames("k-toolbar-button",{"k-icon-button":n.mobileMode}),title:m.toLanguageString(l.toolbarColumnsChooser,l.messages[l.toolbarColumnsChooser]),onClick:U},!n.mobileMode&&m.toLanguageString(l.toolbarColumnsChooser,l.messages[l.toolbarColumnsChooser]));return e.createElement(e.Fragment,null,w?e.createElement(H.BadgeContainer,null,z,e.createElement(H.Badge,{themeColor:"primary"})):z,n.mobileMode?e.createElement(me.GridToolbarAdaptiveProvider,null,re.createPortal(e.createElement(ue.GridAdaptiveToolbarColumnChooser,{computedShow:I,filter:d,filtered:x,selectedColumns:a,allSelected:C,checkedCount:g,onClose:P,onApply:D,onReset:N,onFilter:L,onCheckChange:O,onSelectAll:G},j),(F=Q())==null?void 0:F.body)):e.createElement(ie.Popup,{anchor:(K=i.current)==null?void 0:K.element,show:I,popupClass:"k-grid-columnmenu-popup",onMouseDownOutside:ne},e.createElement("div",{ref:R,onBlur:ee,onFocus:Z,onMouseDown:te,onKeyDown:oe,className:"k-column-menu k-column-menu-md"},j)))};$.displayName="KendoReactGridToolbarColumnsChooser";exports.GridToolbarColumnsChooser=$;
|
|
@@ -5,174 +5,185 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
9
|
-
import
|
|
10
|
-
import { Button as
|
|
11
|
-
import { useDocument as
|
|
12
|
-
import { TextBox as
|
|
13
|
-
import { searchIcon as
|
|
14
|
-
import { GridColumnMenuItemContent as
|
|
15
|
-
import { filterSelectAll as
|
|
16
|
-
import { GridContext as
|
|
17
|
-
import { useLocalization as
|
|
18
|
-
import { GridAdaptiveToolbarColumnChooser as
|
|
19
|
-
import { Popup as
|
|
20
|
-
import { BadgeContainer as
|
|
21
|
-
import { GridToolbarAdaptiveProvider as
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
8
|
+
import * as e from "react";
|
|
9
|
+
import re from "react-dom";
|
|
10
|
+
import { Button as x } from "@progress/kendo-react-buttons";
|
|
11
|
+
import { useDocument as ae, useAsyncFocusBlur as se, IconWrap as ce, classNames as me, getActiveElement as ue } from "@progress/kendo-react-common";
|
|
12
|
+
import { TextBox as ie, InputPrefix as de, Checkbox as H } from "@progress/kendo-react-inputs";
|
|
13
|
+
import { searchIcon as fe, columnsIcon as ge } from "@progress/kendo-svg-icons";
|
|
14
|
+
import { GridColumnMenuItemContent as he } from "../columnMenu/GridColumnMenuItemContent.mjs";
|
|
15
|
+
import { filterSelectAll as V, messages as i, columnMenuColumnChooserSelectedItems as $, filterApplyButton as W, filterResetButton as _, toolbarColumnsChooser as v } from "../messages/index.mjs";
|
|
16
|
+
import { GridContext as Ce } from "../utils/GridContext.mjs";
|
|
17
|
+
import { useLocalization as pe } from "@progress/kendo-react-intl";
|
|
18
|
+
import { GridAdaptiveToolbarColumnChooser as ke } from "./adaptiveContent/GridAdaptiveToolbarColumnChooser.mjs";
|
|
19
|
+
import { Popup as be } from "@progress/kendo-react-popup";
|
|
20
|
+
import { BadgeContainer as Ee, Badge as ve } from "@progress/kendo-react-indicators";
|
|
21
|
+
import { GridToolbarAdaptiveProvider as Se } from "./adaptiveContext/GridToolbarAdaptiveContext.mjs";
|
|
22
|
+
const q = (r) => {
|
|
23
|
+
const a = {};
|
|
24
|
+
for (const n of r)
|
|
25
|
+
a[n.id || ""] = !n.hidden;
|
|
26
|
+
return a;
|
|
27
|
+
}, Me = (r) => {
|
|
28
|
+
var P, j;
|
|
29
|
+
const { onCloseMenu: a } = r, n = e.useContext(Ce), l = n.columnsState, S = n.onColumnsStateChange, C = l || [], [M, p] = e.useState(!1), [d, J] = e.useState(""), [w, k] = e.useState(!1), [s, b] = e.useState(() => q(C)), Q = e.useMemo(
|
|
30
|
+
() => C.map((t) => `${t.id}:${!!t.hidden}`).join(","),
|
|
31
|
+
[C]
|
|
32
|
+
), y = e.useMemo(
|
|
33
|
+
() => q(C),
|
|
34
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
35
|
+
[Q]
|
|
36
|
+
);
|
|
37
|
+
e.useEffect(() => {
|
|
38
|
+
w || b(y);
|
|
39
|
+
}, [w, y]);
|
|
40
|
+
const m = e.useRef(null), B = e.useRef(null), A = e.useRef(null), D = e.useRef(0), u = pe(), U = ae(m), T = e.useMemo(
|
|
25
41
|
() => (l == null ? void 0 : l.filter(
|
|
26
|
-
(
|
|
42
|
+
(t) => {
|
|
27
43
|
var o;
|
|
28
|
-
return (o =
|
|
44
|
+
return (o = t.title || t.field) == null ? void 0 : o.toLowerCase().includes(d.toLowerCase());
|
|
29
45
|
}
|
|
30
46
|
)) || [],
|
|
31
|
-
[l,
|
|
32
|
-
),
|
|
33
|
-
() => Object.values(
|
|
34
|
-
[
|
|
35
|
-
), g =
|
|
36
|
-
(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
hidden: !r[P.id || ""]
|
|
47
|
+
[l, d]
|
|
48
|
+
), f = e.useMemo(
|
|
49
|
+
() => Object.values(s).filter((t) => t).length,
|
|
50
|
+
[s]
|
|
51
|
+
), g = e.useMemo(() => f === (l == null ? void 0 : l.length), [l, f]), I = e.useCallback(
|
|
52
|
+
(t) => {
|
|
53
|
+
t.preventDefault();
|
|
54
|
+
const c = ((h) => (h == null ? void 0 : h.map((E) => ({
|
|
55
|
+
...E,
|
|
56
|
+
hidden: !s[E.id || ""]
|
|
42
57
|
}))) || [])(l);
|
|
43
|
-
|
|
44
|
-
},
|
|
45
|
-
[l, b, n.onCloseMenu, r]
|
|
46
|
-
), A = (e) => {
|
|
47
|
-
e.preventDefault(), p(y), h(!1);
|
|
48
|
-
}, x = t.useCallback(() => {
|
|
49
|
-
const e = { ...r };
|
|
50
|
-
Object.keys(e).forEach(
|
|
51
|
-
(o, c) => e[o] = g && c === 0 ? !0 : !g
|
|
52
|
-
), p(e), h(!0);
|
|
53
|
-
}, [r, g]), T = t.useCallback(
|
|
54
|
-
(e, o) => {
|
|
55
|
-
const c = { ...r };
|
|
56
|
-
c[o || ""] = e, p(c), h(!0);
|
|
58
|
+
S && S(c), a == null || a(), p(!1), k(!1);
|
|
57
59
|
},
|
|
58
|
-
[
|
|
59
|
-
),
|
|
60
|
-
|
|
61
|
-
},
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
},
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
60
|
+
[l, S, a, s]
|
|
61
|
+
), L = (t) => {
|
|
62
|
+
t.preventDefault(), b(y), k(!1);
|
|
63
|
+
}, R = e.useCallback(() => {
|
|
64
|
+
b((t) => {
|
|
65
|
+
const o = { ...t };
|
|
66
|
+
return Object.keys(o).forEach((h, E) => o[h] = g && E === 0 ? !0 : !g), o;
|
|
67
|
+
}), k(!0);
|
|
68
|
+
}, [g]), z = e.useCallback((t, o) => {
|
|
69
|
+
b((c) => ({ ...c, [o || ""]: t })), k(!0);
|
|
70
|
+
}, []), F = (t) => {
|
|
71
|
+
J(String(t.target.value));
|
|
72
|
+
}, X = (t) => {
|
|
73
|
+
t.preventDefault(), p(!M);
|
|
74
|
+
}, N = e.useMemo(() => r.show !== void 0 ? r.show : M, [r.show, M]), G = () => {
|
|
75
|
+
var t;
|
|
76
|
+
a && a(), p(!1), m.current && ((t = m.current.element) == null || t.focus());
|
|
77
|
+
}, Y = (t) => {
|
|
78
|
+
const o = ue(document);
|
|
79
|
+
clearTimeout(D.current), D.current = window.setTimeout(() => {
|
|
80
|
+
!n.mobileMode && o && t.relatedTarget !== m.current && B.current && !B.current.contains(o) && G();
|
|
70
81
|
});
|
|
71
|
-
},
|
|
72
|
-
clearTimeout(
|
|
73
|
-
}, { onFocus:
|
|
74
|
-
onFocus: (
|
|
75
|
-
onBlur: (
|
|
76
|
-
}),
|
|
82
|
+
}, Z = () => {
|
|
83
|
+
clearTimeout(D.current);
|
|
84
|
+
}, { onFocus: ee, onBlur: te } = se({
|
|
85
|
+
onFocus: (t) => Z(),
|
|
86
|
+
onBlur: (t) => Y(t)
|
|
87
|
+
}), oe = (t) => {
|
|
77
88
|
var o;
|
|
78
|
-
(o =
|
|
79
|
-
},
|
|
89
|
+
(o = A.current) == null || o.triggerMouseEvent(t);
|
|
90
|
+
}, ne = (t) => {
|
|
80
91
|
var o;
|
|
81
|
-
(o =
|
|
82
|
-
},
|
|
83
|
-
!
|
|
84
|
-
},
|
|
85
|
-
|
|
92
|
+
(o = A.current) == null || o.triggerKeyboardEvent(t);
|
|
93
|
+
}, le = (t) => {
|
|
94
|
+
!t.isAnchorClicked && p(!1);
|
|
95
|
+
}, K = /* @__PURE__ */ e.createElement(he, { show: !0 }, /* @__PURE__ */ e.createElement("form", { onSubmit: I, onReset: L, className: "k-filter-menu" }, /* @__PURE__ */ e.createElement("div", { className: "k-filter-menu-container" }, /* @__PURE__ */ e.createElement(
|
|
96
|
+
ie,
|
|
86
97
|
{
|
|
87
98
|
className: "k-searchbox",
|
|
88
|
-
value:
|
|
89
|
-
onChange:
|
|
90
|
-
size:
|
|
91
|
-
prefix: () => /* @__PURE__ */
|
|
99
|
+
value: d,
|
|
100
|
+
onChange: F,
|
|
101
|
+
size: n.mobileMode ? "large" : "medium",
|
|
102
|
+
prefix: () => /* @__PURE__ */ e.createElement(de, null, /* @__PURE__ */ e.createElement(ce, { name: "search", icon: fe }))
|
|
92
103
|
}
|
|
93
|
-
), /* @__PURE__ */
|
|
94
|
-
|
|
104
|
+
), /* @__PURE__ */ e.createElement("ul", { className: "k-reset k-multicheck-wrap" }, !d && /* @__PURE__ */ e.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ e.createElement(
|
|
105
|
+
H,
|
|
95
106
|
{
|
|
96
107
|
checked: g,
|
|
97
|
-
onChange:
|
|
98
|
-
label:
|
|
99
|
-
size:
|
|
108
|
+
onChange: R,
|
|
109
|
+
label: u.toLanguageString(V, i[V]),
|
|
110
|
+
size: n.mobileMode ? "large" : "medium"
|
|
100
111
|
}
|
|
101
|
-
)),
|
|
102
|
-
|
|
112
|
+
)), T.map((t) => /* @__PURE__ */ e.createElement("li", { key: t.id, className: "k-item" }, /* @__PURE__ */ e.createElement(
|
|
113
|
+
H,
|
|
103
114
|
{
|
|
104
|
-
disabled:
|
|
105
|
-
checked:
|
|
115
|
+
disabled: s[t.id || ""] && f === 1,
|
|
116
|
+
checked: s[t.id || ""],
|
|
106
117
|
onChange: (o) => {
|
|
107
118
|
var c;
|
|
108
|
-
return
|
|
119
|
+
return z(!!((c = o.target.element) != null && c.checked), t.id);
|
|
109
120
|
},
|
|
110
|
-
label:
|
|
111
|
-
size:
|
|
121
|
+
label: t.title || t.field,
|
|
122
|
+
size: n.mobileMode ? "large" : "medium"
|
|
112
123
|
}
|
|
113
|
-
)))), /* @__PURE__ */
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
)), /* @__PURE__ */
|
|
117
|
-
|
|
124
|
+
)))), /* @__PURE__ */ e.createElement("div", { className: "k-filter-selected-items" }, f, " ", u.toLanguageString(
|
|
125
|
+
$,
|
|
126
|
+
i[$]
|
|
127
|
+
)), /* @__PURE__ */ e.createElement("div", { className: "k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ e.createElement(x, { type: "submit", themeColor: "primary" }, u.toLanguageString(W, i[W])), /* @__PURE__ */ e.createElement(x, { type: "reset" }, u.toLanguageString(_, i[_])))))), O = /* @__PURE__ */ e.createElement(
|
|
128
|
+
x,
|
|
118
129
|
{
|
|
119
|
-
ref:
|
|
130
|
+
ref: m,
|
|
120
131
|
togglable: !0,
|
|
121
|
-
selected:
|
|
122
|
-
svgIcon:
|
|
123
|
-
icon:
|
|
124
|
-
size:
|
|
125
|
-
className:
|
|
126
|
-
"k-icon-button":
|
|
132
|
+
selected: N,
|
|
133
|
+
svgIcon: r.svgIcon ? r.svgIcon : r.icon ? void 0 : ge,
|
|
134
|
+
icon: r.icon,
|
|
135
|
+
size: n.mobileMode ? "large" : "medium",
|
|
136
|
+
className: me("k-toolbar-button", {
|
|
137
|
+
"k-icon-button": n.mobileMode
|
|
127
138
|
}),
|
|
128
|
-
title:
|
|
129
|
-
onClick:
|
|
139
|
+
title: u.toLanguageString(v, i[v]),
|
|
140
|
+
onClick: X
|
|
130
141
|
},
|
|
131
|
-
!
|
|
142
|
+
!n.mobileMode && u.toLanguageString(v, i[v])
|
|
132
143
|
);
|
|
133
|
-
return /* @__PURE__ */
|
|
134
|
-
/* @__PURE__ */
|
|
135
|
-
|
|
144
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, w ? /* @__PURE__ */ e.createElement(Ee, null, O, /* @__PURE__ */ e.createElement(ve, { themeColor: "primary" })) : O, n.mobileMode ? /* @__PURE__ */ e.createElement(Se, null, re.createPortal(
|
|
145
|
+
/* @__PURE__ */ e.createElement(
|
|
146
|
+
ke,
|
|
136
147
|
{
|
|
137
|
-
computedShow:
|
|
138
|
-
filter:
|
|
139
|
-
filtered:
|
|
140
|
-
selectedColumns:
|
|
148
|
+
computedShow: N,
|
|
149
|
+
filter: d,
|
|
150
|
+
filtered: T,
|
|
151
|
+
selectedColumns: s,
|
|
141
152
|
allSelected: g,
|
|
142
|
-
checkedCount:
|
|
143
|
-
onClose:
|
|
144
|
-
onApply:
|
|
145
|
-
onReset:
|
|
146
|
-
onFilter:
|
|
147
|
-
onCheckChange:
|
|
148
|
-
onSelectAll:
|
|
153
|
+
checkedCount: f,
|
|
154
|
+
onClose: G,
|
|
155
|
+
onApply: I,
|
|
156
|
+
onReset: L,
|
|
157
|
+
onFilter: F,
|
|
158
|
+
onCheckChange: z,
|
|
159
|
+
onSelectAll: R
|
|
149
160
|
},
|
|
150
|
-
|
|
161
|
+
K
|
|
151
162
|
),
|
|
152
|
-
(
|
|
153
|
-
)) : /* @__PURE__ */
|
|
154
|
-
|
|
163
|
+
(P = U()) == null ? void 0 : P.body
|
|
164
|
+
)) : /* @__PURE__ */ e.createElement(
|
|
165
|
+
be,
|
|
155
166
|
{
|
|
156
|
-
anchor: (
|
|
157
|
-
show:
|
|
167
|
+
anchor: (j = m.current) == null ? void 0 : j.element,
|
|
168
|
+
show: N,
|
|
158
169
|
popupClass: "k-grid-columnmenu-popup",
|
|
159
|
-
onMouseDownOutside:
|
|
170
|
+
onMouseDownOutside: le
|
|
160
171
|
},
|
|
161
|
-
/* @__PURE__ */
|
|
172
|
+
/* @__PURE__ */ e.createElement(
|
|
162
173
|
"div",
|
|
163
174
|
{
|
|
164
|
-
ref:
|
|
165
|
-
onBlur:
|
|
166
|
-
onFocus:
|
|
167
|
-
onMouseDown:
|
|
168
|
-
onKeyDown:
|
|
175
|
+
ref: B,
|
|
176
|
+
onBlur: te,
|
|
177
|
+
onFocus: ee,
|
|
178
|
+
onMouseDown: oe,
|
|
179
|
+
onKeyDown: ne,
|
|
169
180
|
className: "k-column-menu k-column-menu-md"
|
|
170
181
|
},
|
|
171
|
-
|
|
182
|
+
K
|
|
172
183
|
)
|
|
173
184
|
));
|
|
174
185
|
};
|
|
175
|
-
|
|
186
|
+
Me.displayName = "KendoReactGridToolbarColumnsChooser";
|
|
176
187
|
export {
|
|
177
|
-
|
|
188
|
+
Me as GridToolbarColumnsChooser
|
|
178
189
|
};
|