@progress/kendo-react-treelist 14.5.0-develop.8 → 15.0.0-develop.1
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/README.md +4 -4
- package/TreeListMcpWrapper.d.ts +17 -0
- package/TreeListMcpWrapper.js +8 -0
- package/TreeListMcpWrapper.mjs +18 -0
- package/cells/TreeListCell.js +1 -1
- package/cells/TreeListCell.mjs +17 -17
- package/dist/cdn/js/kendo-react-treelist.js +1 -1
- package/index.d.mts +3 -1
- package/index.d.ts +3 -1
- package/index.js +1 -1
- package/index.mjs +52 -51
- package/interfaces/TreeListProps.d.ts +8 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +15 -10
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
[](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-treelist&utm_content=banner)
|
|
1
|
+
[](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-treelist&utm_content=banner)
|
|
2
2
|
|
|
3
3
|
# KendoReact TreeList Component for React
|
|
4
4
|
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
>
|
|
13
13
|
> [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-treelist) and speed up your development process!
|
|
14
14
|
>
|
|
15
|
-
> If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
15
|
+
> If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started).
|
|
16
16
|
|
|
17
17
|
The [React TreeList](https://www.telerik.com/kendo-react-ui/treelist), part of KendoReact, enables the display of self-referencing tabular data and allows sorting, filtering, and data editing when required.
|
|
18
18
|
|
|
@@ -34,7 +34,7 @@ Among the features which the KendoReact TreeList component delivers are:
|
|
|
34
34
|
|
|
35
35
|
The following table outlines the key resources available with KendoReact and KendoReact Free.
|
|
36
36
|
|
|
37
|
-
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
|
|
37
|
+
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
|
|
38
38
|
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
39
39
|
| React components | 50+ | 120+ |
|
|
40
40
|
| Four professional themes | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
|
|
@@ -57,7 +57,7 @@ For any issues you might encounter while working with the KendoReact TreeList, u
|
|
|
57
57
|
## Resources
|
|
58
58
|
|
|
59
59
|
- [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-treelist)
|
|
60
|
-
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
60
|
+
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
|
|
61
61
|
- [Get Started with the KendoReact TreeList](https://www.telerik.com/kendo-react-ui/components/treelist/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-treelist)
|
|
62
62
|
- [API Reference of the KendoReact TreeList](https://www.telerik.com/kendo-react-ui/components/treelist/api/TreeListProps/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-treelist)
|
|
63
63
|
- [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-treelist)
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { TreeList as TreeListClassComponent } from './TreeList.js';
|
|
9
|
+
import { TreeListProps } from './interfaces/TreeListProps';
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
/**
|
|
12
|
+
* Functional wrapper that adds Web MCP tool registration
|
|
13
|
+
* around the class-based TreeList component.
|
|
14
|
+
*
|
|
15
|
+
* @hidden
|
|
16
|
+
*/
|
|
17
|
+
export declare const TreeListWrapper: React.ForwardRefExoticComponent<TreeListProps & React.RefAttributes<TreeListClassComponent>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),s=require("./TreeList.js"),c=require("@progress/kendo-react-common");function u(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const o=u(i),a=o.forwardRef((e,r)=>{const[t,n]=c.useMergedRef(r);return c.useWebMcpRegister("treelist",t,e,e.webMcp),o.createElement(s.TreeList,{...e,ref:n})});a.displayName="KendoReactTreeList";exports.TreeListWrapper=a;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import * as r from "react";
|
|
9
|
+
import { TreeList as m } from "./TreeList.mjs";
|
|
10
|
+
import { useMergedRef as o, useWebMcpRegister as s } from "@progress/kendo-react-common";
|
|
11
|
+
const a = r.forwardRef((e, t) => {
|
|
12
|
+
const [i, f] = o(t);
|
|
13
|
+
return s("treelist", i, e, e.webMcp), /* @__PURE__ */ r.createElement(m, { ...e, ref: f });
|
|
14
|
+
});
|
|
15
|
+
a.displayName = "KendoReactTreeList";
|
|
16
|
+
export {
|
|
17
|
+
a as TreeListWrapper
|
|
18
|
+
};
|
package/cells/TreeListCell.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
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react"),N=require("@progress/kendo-react-intl"),d=require("@progress/kendo-react-common"),S=require("@progress/kendo-react-data-tools"),E=require("@progress/kendo-svg-icons"),b=require("../constants/index.js");function R(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const l=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,l.get?l:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const i=R(C),h=e=>{const{hasChildren:a,level:t=[0],expanded:l,dataItem:r,format:u,id:x,ariaColumnIndex:T,isSelected:g}=e,s=d.getNestedValue(e.field,r),k=N.useInternationalization(),v=S.useTableKeyboardNavigation(x);let m="";const y=i.useCallback(n=>{n.isDefaultPrevented()||n.keyCode===d.Keys.enter&&e.expandable&&(n.preventDefault(),e.onExpandChange(n,r,t))},[e.expandable,r,t]);s!=null&&(m=u?k.format(u,s):s.toString());const o=[];if(e.expandable){const n=c=>i.createElement("span",{key:c,className:"k-treelist-toggle k-icon k-svg-icon"},i.createElement("svg",{"aria-hidden":"true",focusable:"false",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"}));o.push(...t.slice(1).map((c,I)=>n(I))),a?o.push(i.createElement(d.IconWrap,{className:"k-treelist-toggle",name:l?"chevron-down":"chevron-right",icon:l?E.chevronDownIcon:E.chevronRightIcon,key:"expand-collapse",onClick:c=>e.onExpandChange(c.syntheticEvent||c,r,t),[b.TREELIST_PREVENT_SELECTION_ELEMENT]:!0})):o.push(n(o.length))}const f=i.createElement("td",{style:e.style,className:d.classNames("k-table-td",e.className,{"k-text-nowrap":e.expandable,"k-selected":g}),colSpan:e.colSpan,"aria-colindex":T,"aria-expanded":a?l:void 0,"aria-selected":g,role:"gridcell",onKeyDown:y,[b.TREELIST_COL_INDEX_ATTRIBUTE]:e.colIndex,...v},o,m);return e.render?e.render.call(void 0,f,e):f};h.displayName="KendoReactTreeListCell";exports.TreeListCell=h;
|
package/cells/TreeListCell.mjs
CHANGED
|
@@ -6,33 +6,33 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as l from "react";
|
|
9
|
-
import { useInternationalization as
|
|
10
|
-
import { getNestedValue as
|
|
11
|
-
import { useTableKeyboardNavigation as
|
|
12
|
-
import {
|
|
9
|
+
import { useInternationalization as T } from "@progress/kendo-react-intl";
|
|
10
|
+
import { getNestedValue as N, Keys as k, IconWrap as C, classNames as b } from "@progress/kendo-react-common";
|
|
11
|
+
import { useTableKeyboardNavigation as w } from "@progress/kendo-react-data-tools";
|
|
12
|
+
import { chevronDownIcon as y, chevronRightIcon as R } from "@progress/kendo-svg-icons";
|
|
13
13
|
import { TREELIST_PREVENT_SELECTION_ELEMENT as S, TREELIST_COL_INDEX_ATTRIBUTE as L } from "../constants/index.mjs";
|
|
14
14
|
const _ = (e) => {
|
|
15
|
-
const { hasChildren: d, level:
|
|
15
|
+
const { hasChildren: d, level: o = [0], expanded: r, dataItem: i, format: s, id: f, ariaColumnIndex: u, isSelected: m } = e, c = N(e.field, i), h = T(), x = w(f);
|
|
16
16
|
let g = "";
|
|
17
|
-
const
|
|
17
|
+
const v = l.useCallback(
|
|
18
18
|
(a) => {
|
|
19
|
-
a.isDefaultPrevented() || a.keyCode ===
|
|
19
|
+
a.isDefaultPrevented() || a.keyCode === k.enter && e.expandable && (a.preventDefault(), e.onExpandChange(a, i, o));
|
|
20
20
|
},
|
|
21
|
-
[e.expandable,
|
|
21
|
+
[e.expandable, i, o]
|
|
22
22
|
);
|
|
23
|
-
c != null && (g = s ?
|
|
23
|
+
c != null && (g = s ? h.format(s, c) : c.toString());
|
|
24
24
|
const t = [];
|
|
25
25
|
if (e.expandable) {
|
|
26
26
|
const a = (n) => /* @__PURE__ */ l.createElement("span", { key: n, className: "k-treelist-toggle k-icon k-svg-icon" }, /* @__PURE__ */ l.createElement("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }));
|
|
27
|
-
t.push(...
|
|
27
|
+
t.push(...o.slice(1).map((n, I) => a(I))), d ? t.push(
|
|
28
28
|
/* @__PURE__ */ l.createElement(
|
|
29
|
-
|
|
29
|
+
C,
|
|
30
30
|
{
|
|
31
31
|
className: "k-treelist-toggle",
|
|
32
|
-
name: r ? "
|
|
33
|
-
icon: r ?
|
|
32
|
+
name: r ? "chevron-down" : "chevron-right",
|
|
33
|
+
icon: r ? y : R,
|
|
34
34
|
key: "expand-collapse",
|
|
35
|
-
onClick: (n) => e.onExpandChange(n.syntheticEvent || n,
|
|
35
|
+
onClick: (n) => e.onExpandChange(n.syntheticEvent || n, i, o),
|
|
36
36
|
[S]: !0
|
|
37
37
|
}
|
|
38
38
|
)
|
|
@@ -42,7 +42,7 @@ const _ = (e) => {
|
|
|
42
42
|
"td",
|
|
43
43
|
{
|
|
44
44
|
style: e.style,
|
|
45
|
-
className:
|
|
45
|
+
className: b("k-table-td", e.className, {
|
|
46
46
|
"k-text-nowrap": e.expandable,
|
|
47
47
|
"k-selected": m
|
|
48
48
|
}),
|
|
@@ -51,9 +51,9 @@ const _ = (e) => {
|
|
|
51
51
|
"aria-expanded": d ? r : void 0,
|
|
52
52
|
"aria-selected": m,
|
|
53
53
|
role: "gridcell",
|
|
54
|
-
onKeyDown:
|
|
54
|
+
onKeyDown: v,
|
|
55
55
|
[L]: e.colIndex,
|
|
56
|
-
...
|
|
56
|
+
...x
|
|
57
57
|
},
|
|
58
58
|
t,
|
|
59
59
|
g
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-data-tools"),require("@progress/kendo-react-intl"),require("@progress/kendo-svg-icons"),require("react-dom"),require("@progress/kendo-react-buttons"),require("@progress/kendo-react-inputs"),require("@progress/kendo-react-dateinputs")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-data-tools","@progress/kendo-react-intl","@progress/kendo-svg-icons","react-dom","@progress/kendo-react-buttons","@progress/kendo-react-inputs","@progress/kendo-react-dateinputs"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTreelist={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactDataTools,e.KendoReactIntl,e.KendoSvgIcons,e.ReactDOM,e.KendoReactButtons,e.KendoReactInputs,e.KendoReactDateinputs)}(this,function(e,t,a,o,r,n,l,s,i,d,c){"use strict";function h(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(a){if("default"!==a){var o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:function(){return e[a]}})}}),t.default=e,Object.freeze(t)}var p=h(t),u=h(s);function g(e,t,a){const o=Array.from(e.tHead&&e.tHead.rows||[]),r=[t];let n;const l=a||(e=>window.getComputedStyle(e).height||void 0);o.forEach(e=>{const t=l(e);r.push(function(e){return void 0!==e&&("number"==typeof e||/px$/i.test(String(e)))}(t)?parseFloat(String(t)):e.offsetHeight)});for(let e=0;e<o.length;e++)n=r.slice(0,e+1).reduce((e,t)=>e+t),Array.from(o[e].cells).forEach(e=>e.style.top=n+"px")}const m=1e6;function f(e){const{rows:t,tableViewPortHeight:a,scrollTop:o}=e;if(0===t.length)return[];const r=t[0].height,n=Math.min(Math.round(o/r),t.length),l=Math.round(a/r),s=Math.max(0,n-l),i=Math.min(t.length,n+2*l),d=t.slice(s,i),c=d[d.length-1];return s>0&&d.unshift({dataItem:{},level:[m],offsetTop:0,height:d[0].offsetTop,levelCount:0}),i<t.length-1&&d.push({dataItem:{},level:[m,m],offsetTop:c.offsetTop+c.height,height:(t.length-i)*r,levelCount:0}),d}const v=r.TABLE_ROW_INDEX_ATTRIBUTE,b=r.TABLE_COL_INDEX_ATTRIBUTE,C=r.TABLE_PREVENT_SELECTION_ELEMENT,x=e=>{const{hasChildren:t,level:a=[0],expanded:s,dataItem:i,format:d,id:c,ariaColumnIndex:h,isSelected:u}=e,g=o.getNestedValue(e.field,i),m=n.useInternationalization(),f=r.useTableKeyboardNavigation(c);let v="";const x=p.useCallback(t=>{t.isDefaultPrevented()||t.keyCode===o.Keys.enter&&e.expandable&&(t.preventDefault(),e.onExpandChange(t,i,a))},[e.expandable,i,a]);null!=g&&(v=d?m.format(d,g):g.toString());const I=[];if(e.expandable){const r=e=>p.createElement("span",{key:e,className:"k-treelist-toggle k-icon k-svg-icon"},p.createElement("svg",{"aria-hidden":"true",focusable:"false",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"}));I.push(...a.slice(1).map((e,t)=>r(t))),t?I.push(p.createElement(o.IconWrap,{className:"k-treelist-toggle",name:s?"caret-alt-down":"caret-alt-right",icon:s?l.caretAltDownIcon:l.caretAltRightIcon,key:"expand-collapse",onClick:t=>e.onExpandChange(t.syntheticEvent||t,i,a),[C]:!0})):I.push(r(I.length))}const y=p.createElement("td",{style:e.style,className:o.classNames("k-table-td",e.className,{"k-text-nowrap":e.expandable,"k-selected":u}),colSpan:e.colSpan,"aria-colindex":h,"aria-expanded":t?s:void 0,"aria-selected":u,role:"gridcell",onKeyDown:x,[b]:e.colIndex,...f},I,v);return e.render?e.render.call(void 0,y,e):y};x.displayName="KendoReactTreeListCell";const I="treelist.filterClearButton",y="treelist.filterEqOperator",E="treelist.filterNotEqOperator",S="treelist.filterIsNullOperator",R="treelist.filterIsNotNullOperator",w="treelist.filterIsEmptyOperator",T="treelist.filterIsNotEmptyOperator",k="treelist.filterStartsWithOperator",N="treelist.filterContainsOperator",D="treelist.filterNotContainsOperator",L="treelist.filterEndsWithOperator",O="treelist.filterGteOperator",F="treelist.filterGtOperator",K="treelist.filterLteOperator",P="treelist.filterLtOperator",M="treelist.filterIsTrue",z="treelist.filterIsFalse",A="treelist.filterBooleanAll",H="treelist.filterAfterOrEqualOperator",B="treelist.filterAfterOperator",j="treelist.filterBeforeOperator",q="treelist.filterBeforeOrEqualOperator",V="treelist.noRecords",_={[I]:"Clear",[y]:"Is equal to",[E]:"Is not equal to",[S]:"Is null",[R]:"Is not null",[w]:"Is empty",[T]:"Is not empty",[k]:"Starts with",[N]:"Contains",[D]:"Does not contain",[L]:"Ends with",[O]:"Is greater than or equal to",[F]:"Is greater than",[K]:"Is less than or equal to",[P]:"Is less than",[M]:"Is true",[z]:"Is false",[A]:"(All)",[H]:"Is after or equal to",[B]:"Is after",[j]:"Is before",[q]:"Is before or equal to",[V]:"No records available"};let U=class extends p.Component{render(){return this.props.children||n.provideLocalizationService(this).toLanguageString(V,_[V])}};n.registerForLocalization(U);const W=p.forwardRef((e,t)=>{const{isSelected:a,rowHeight:r,isAltRow:n,expanded:l,ariaRowIndex:s,level:i,ariaSetSize:d,ariaPosInSet:c}=e,h=o.classNames("k-table-row","k-master-row",{"k-selected":a,"k-table-alt-row":n}),u=p.useMemo(()=>void 0!==r?{height:r+"px"}:void 0,[r]),g=p.createElement("tr",{onClick:e.onClick,onDoubleClick:e.onDoubleClick,onContextMenu:e.onContextMenu,className:h,style:u,ref:t,"aria-expanded":l,role:"row","aria-rowindex":s,"aria-level":i.length,"aria-posinset":c,"aria-setsize":d,[v]:e.rowIndex},e.children);return p.createElement(p.Fragment,null,e.render?e.render.call(void 0,g,e):g)});W.displayName="KendoReactTreeListRow";const $=Object.freeze({name:"@progress/kendo-react-treelist",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"14.5.0-develop.8",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),X=class extends p.Component{constructor(e){super(e),this.element=null,this.wrapperScrollLeft=0,this.wrapperScrollTop=0,this.updateOnScroll=!1,this.tbodyOffsetTop=0,this.prevData=[],this.flattedData=[],this.extendedColumn=[],this.columnsMap=[],this.contextStateRef={current:void 0},this.navigationStateRef={current:void 0},this.showLicenseWatermark=!1,this.licenseMessage=void 0,this.scrollIntoView=e=>{if(!this.element)return;const{rowIndex:t=0}=e,{scrollable:a,rowHeight:o=0}=this.props;if("virtual"===a||o)this.element.scroll(0,(t-1)*o);else{const e=this.element.querySelector(`tbody > tr:nth-child(${t})`);if(e){const t=e.offsetTop-this.tbodyOffsetTop;this.element.scroll(0,t)}}},this.getExtendedColumn=o.memoizeOne((e,t)=>r.readColumns(e,{prevId:0,idPrefix:t})),this.getColumnsMap=o.memoizeOne((e,t)=>r.mapColumns(e,t)),this.onKeyDown=e=>{if(r.tableKeyboardNavigation.onKeyDown(e,{navigatable:!1,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),this.props.onKeyDown){const{mode:t,cell:a}=r.getSelectionOptions(this.props.selectable),o={dataItems:this.getLeafDataItems(),mode:t,cell:a,componentId:this._treeListId,selectedField:this.props.selectedField,...this.getArguments(e)};this.props.onKeyDown.call(void 0,o)}},this.onFocus=e=>{r.tableKeyboardNavigation.onFocus(e,{contextStateRef:this.contextStateRef})},this.onRowDrag=e=>{this.props.onRowDrag&&this.props.onRowDrag.call(void 0,{...e,target:this})},this.onRowDrop=e=>{this.props.onRowDrop&&this.props.onRowDrop.call(void 0,{...e,target:this})},this.columnReorder=(e,t,a)=>{const o=this.extendedColumn[e].depth,r=e=>{do{e++}while(e<this.extendedColumn.length&&this.extendedColumn[e].depth>o);return e},n=this.extendedColumn.splice(e,r(e)-e);if(this.extendedColumn.splice(e<t?r(t-n.length):t,0,...n),this.extendedColumn.filter(e=>e.declarationIndex>=0).forEach((e,t)=>e.orderIndex=t),this.props.onColumnReorder){const e={target:this,columns:this.columns,nativeEvent:a};this.props.onColumnReorder.call(void 0,e)}},this.onResize=(e,t,a,o,r)=>{if(this.props.onColumnResize){const n=this.extendedColumn.filter(e=>0===e.children.length).reduce((e,t)=>e+parseFloat(String(t.width)),0),l={columns:this.columns,totalWidth:n,index:e,nativeEvent:o,newWidth:t,oldWidth:a,end:r,target:this};this.props.onColumnResize.call(void 0,l)}},this.handleOnScroll=e=>{const t=e.currentTarget.scrollLeft,a=e.currentTarget.scrollTop,{columnVirtualization:o,scrollable:r,rowHeight:n=0}=this.props,l=n;let s=!1;o&&Math.abs(this.wrapperScrollLeft-t)>0&&(this.wrapperScrollLeft=t,s=!0),"virtual"===r&&Math.abs(this.wrapperScrollTop-a)>l&&(this.wrapperScrollTop=a,s=!0),s&&(this.updateOnScroll=!0,this.forceUpdate())},this.calculateSizes=e=>{if(!e||"none"===this.props.scrollable)return;const t=Array.from(e.childNodes),a=t.find(e=>"TABLE"===e.nodeName),o=this.props.toolbar&&t.find(e=>1===e.nodeType&&e.classList.contains("k-grid-toolbar"));let r=0;if(o){const e=o.style.boxSizing;o.style.boxSizing="border-box",r=parseFloat(String(window.getComputedStyle(o).height))||o.offsetHeight,o.style.boxSizing=e,o.getAttribute("style")||o.removeAttribute("style")}this.tbodyOffsetTop=a.tBodies[0].offsetTop,g(a,r)},this.itemChange=e=>{const t=this.props.onItemChange;if(e.field===this.props.expandField){const t=this.props.onExpandChange;if(t){const a={...this.getArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,value:e.value};t.call(void 0,a)}return}if(t){const a={...this.getArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,field:e.field,value:e.value};t.call(void 0,a)}},this.onHeaderSelectionChange=e=>{if(this.props.onHeaderSelectionChange){const t={field:e.field,nativeEvent:e.syntheticEvent&&e.syntheticEvent.nativeEvent,syntheticEvent:e.syntheticEvent,target:this,dataItems:this.getLeafDataItems()};this.props.onHeaderSelectionChange.call(void 0,t)}},this.selectionRelease=e=>{if(this.props.onSelectionChange){const t={syntheticEvent:void 0,target:this,selectedField:this.props.selectedField||"",componentId:this._treeListId,dataItems:this.getLeafDataItems(),dataItem:null,level:[],...e};this.props.onSelectionChange.call(void 0,t)}},this.sortChange=(e,t,a)=>{this.raiseDataEvent(this.props.onSortChange,{sort:t,field:a},e)},this.headerFilterChange=(e,t,a)=>{this.raiseDataEvent(this.props.onFilterChange,{filter:t,field:a},e)},this.filterChange=e=>{const{filter:t,field:a}=e;this.raiseDataEvent(this.props.onFilterChange,{filter:t,field:a},e.syntheticEvent)},this.columnMenuFilterChange=(e,t,a)=>{const{onColumnMenuFilterChange:o}=this.props;if(!o)return;const r={syntheticEvent:e,filter:t,field:a,target:this,nativeEvent:e.nativeEvent};o.call(void 0,r)},this.expandChange=(e,t,a)=>{const{expandField:o,onExpandChange:r}=this.props;if(o&&r){const o={...this.getArguments(e),dataItem:t,level:a,value:this.expanded(t)};r.call(void 0,o)}},this.rowClick=(e,t)=>{if(this.props.onRowClick&&"TD"===e.target.nodeName){const a={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowClick.call(void 0,a)}},this.rowDoubleClick=(e,t)=>{if(this.props.onRowDoubleClick&&"TD"===e.target.nodeName){const a={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowDoubleClick.call(void 0,a)}},this.rowContextMenu=(e,t)=>{if(this.props.onRowContextMenu&&"TD"===e.target.nodeName){const a={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowContextMenu.call(void 0,a)}},this.onPageChange=e=>{if(this.props.onPageChange){const t={...this.getArguments(e.syntheticEvent),skip:e.skip,take:e.take};this.props.onPageChange.call(void 0,t)}},this.expandedSubItems=e=>{const t=[];return this.expanded(e)&&this.hasChildren(e)&&t.push(...o.getNestedValue(this.props.subItemsField,e)),t},this.getLeafDataItems=()=>this.flatData.map(e=>e.dataItem),this.expanded=e=>!!o.getNestedValue(this.props.expandField,e),this.hasChildren=e=>!!o.getNestedValue(this.props.subItemsField,e),this.showLicenseWatermark=!o.validatePackage($,{component:"TreeList"}),this.licenseMessage=o.getLicenseMessage($),this.dragLogic=new r.CommonDragLogic(this.columnReorder,o.noop,o.noop),this.columnResize=new r.ColumnResize(this.onResize.bind(this)),r.tableKeyboardNavigation.onConstructor({navigatable:!!e.navigatable,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}get _treeListId(){return this.props.id+"-treelist"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}componentDidMount(){this.calculateSizes(this.element),r.tableKeyboardNavigation.onComponentDidMount({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}getSnapshotBeforeUpdate(){return r.tableKeyboardNavigation.onGetSnapshotBeforeUpdate({document:this.document,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),null}componentDidUpdate(e){e.columns!==this.props.columns&&this.calculateSizes(this.element),r.tableKeyboardNavigation.onComponentDidUpdate({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}componentWillUnmount(){this.columnsMap=[],this.prevData=[],this.flattedData=[],this.updateOnScroll=!1,this.getExtendedColumn.clear(),this.getColumnsMap.clear()}render(){const{columns:e=[],filterRow:t,scrollable:a="scrollable",resizable:n=!1,reorderable:l=!1,skip:s,take:i}=this.props,d=e.some(e=>!!e.filter||!!e.filterCell)||void 0!==t,c=t||r.FilterRow,h=r.tableKeyboardNavigationTools.getIdPrefix(this.navigationStateRef),u=this.getExtendedColumn(e,h),g=u.length!==this.extendedColumn.length;this.extendedColumn=u,this.columnsMap=this.getColumnsMap(this.extendedColumn,g);const m=this.extendedColumn.filter(e=>0===e.children.length);this.columnResize.columns=this.extendedColumn,this.columnResize.resizable=n,this.dragLogic.columns=this.extendedColumn,this.dragLogic.reorderable=l,this.dragLogic.groupable=!1;const v=p.createElement(r.Header,{headerRow:p.createElement(r.HeaderRow,{sort:this.props.sort,sortable:this.props.sortable,sortChange:this.sortChange,selectionChange:this.onHeaderSelectionChange,columns:this.extendedColumn,columnsMap:this.columnsMap,cellRender:this.props.headerCellRender,columnResize:this.columnResize,columnMenu:this.props.columnMenu,columnMenuFilter:this.props.columnMenuFilter,columnMenuFilterChange:this.columnMenuFilterChange,pressHandler:this.dragLogic.pressHandler,dragHandler:this.dragLogic.dragHandler,releaseHandler:this.dragLogic.releaseHandler,filterChange:this.headerFilterChange}),reorderable:this.props.reorderable,filterRow:d&&p.createElement(c,{columns:m,filter:this.props.filter,filterChange:this.filterChange,sort:this.props.sort,ariaRowIndex:this.columnsMap.length+1})||void 0,columnResize:this.columnResize}),b=this.props.style||{},{colSpans:C,hiddenColumns:I}=r.tableColumnsVirtualization({enabled:this.props.columnVirtualization,columns:m,scrollLeft:this.wrapperScrollLeft,tableViewPortWidth:parseFloat((b.width||"").toString())}),y=(e,t,a,o,n,l)=>m.map((s,i)=>{if(I[i])return null;const d=s.id?s.id:i,c=`${s.className?s.className+" ":""}${s.locked?"k-grid-content-sticky":""}`,u={id:r.tableKeyboardNavigationTools.generateNavigatableId(`${a}-${String(i)}`,h),colSpan:C[i],dataItem:e.dataItem,field:s.field,format:s.format,className:c||void 0,render:this.props.cellRender,onChange:this.itemChange,selectionChange:this.props.onSelectionChange?t=>{this.selectionChange({event:t,item:e,columnIndex:i,dataIndex:n})}:void 0,level:e.level,expandable:s.expandable,expanded:o,hasChildren:this.hasChildren(e.dataItem),onExpandChange:this.expandChange,colIndex:i,ariaColumnIndex:s.ariaColumnIndex,style:void 0!==s.left&&{left:s.left,right:s.right,borderRightWidth:s.rightBorder?"1px":""}||{},isSelected:Array.isArray(l)&&l.indexOf(i)>-1};return t&&s.editCell?p.createElement(s.editCell,{key:d,...u,onChange:this.itemChange}):s.cell?p.createElement(s.cell,{key:d,...u}):p.createElement(x,{key:d,...u})});let E=this.flatData;const S=E.length;void 0!==s&&void 0!==i&&(E=E.slice(s,s+i)),"virtual"===a&&(E=f({rows:E,tableViewPortHeight:parseFloat((b.height||b.maxHeight||"").toString()),scrollTop:this.wrapperScrollTop}),this.updateOnScroll=!1);const R=E.map(e=>e.level),w=this.columnsMap.length+(d?1:0)+1,T=E.length>0&&E.map((e,t)=>{const r=o.getNestedValue(this.props.editField,e.dataItem),n=this.props.dataItemKey&&o.getter(this.props.dataItemKey)(e.dataItem),l=String(n||e.level.join(".")),s=this.expanded(e.dataItem),i=this.props.selectedField?o.getNestedValue(this.props.selectedField,e.dataItem):void 0,d={key:l,level:e.level,levels:R,dataItem:e.dataItem,selectedField:this.props.selectedField,rowHeight:"virtual"===a?e.height:this.props.rowHeight,render:this.props.rowRender,onDrop:this.onRowDrop,onDrag:this.onRowDrag,onClick:t=>this.rowClick(t,e),onDoubleClick:t=>this.rowDoubleClick(t,e),onContextMenu:t=>this.rowContextMenu(t,e),isAltRow:t%2!=0,expanded:s,rowIndex:t,ariaRowIndex:w+t,ariaSetSize:e.levelCount,ariaPosInSet:e.level[e.level.length-1]+1,isSelected:"boolean"==typeof i&&i},c=this.props.editRow,h=this.props.row||W,u=y(e,r,l,s,t,i);return r&&c?p.createElement(c,{...d,key:d.key},u):p.createElement(h,{...d,key:d.key},u)})||p.createElement("tr",{className:"k-table-row k-grid-norecords"},p.createElement("td",{colSpan:m.length},this.props.noRecords||p.createElement(U,null))),k=e=>this.props.sort&&this.props.sort.some(t=>t.field===e),N=p.createElement("colgroup",{ref:e=>{this.columnResize.colGroupMain=e}},m.map((e,t)=>p.createElement("col",{key:t.toString(),className:k(e.field)?"k-sorted":void 0,style:void 0!==e.width?{width:e.width}:void 0}))),D=this.props.columnVirtualization||"virtual"===this.props.scrollable,L=this.props.selectable&&this.props.selectable.drag?"none":void 0,O=this.props.tableProps||{};return p.createElement(r.TableKeyboardNavigationContext.Provider,{value:this.contextStateRef.current},p.createElement("div",{id:this.props.id,style:this.props.style,className:o.classNames("k-grid","k-treelist",this.props.className,{"k-treelist-scrollable":"none"!==a}),ref:e=>{this.element=e},onScroll:D?this.handleOnScroll:void 0,onKeyDown:this.onKeyDown,onFocus:this.onFocus,"aria-rowcount":S,"aria-colcount":m.length,role:"treegrid",...r.tableKeyboardNavigationScopeAttributes},this.props.toolbar,p.createElement(r.TableSelection,{selectable:this.props.selectable,onRelease:this.selectionRelease},p.createElement("table",{className:"k-table k-grid-table",...O,style:{...O.style||{},userSelect:L},role:"presentation"},N,v,p.createElement("tbody",{className:"k-table-tbody",...r.tableKeyboardNavigationBodyAttributes,role:"presentation"},T))),this.props.pager&&p.createElement(this.props.pager,{className:"k-grid-pager",total:S,skip:s,take:i,onPageChange:this.onPageChange}),l&&p.createElement(p.Fragment,null,p.createElement(r.DropClue,{ref:this.dragLogic.refDropElementClue}),p.createElement(r.DragClue,{ref:this.dragLogic.refDragElementClue})),this.showLicenseWatermark&&p.createElement(o.WatermarkOverlay,{message:this.licenseMessage})))}get columns(){const e=this.extendedColumn.filter(e=>e.declarationIndex>=0&&-1===e.parentIndex),t=e=>(e.sort((e,t)=>e.declarationIndex-t.declarationIndex),e.map(e=>{const{declarationIndex:a,parentIndex:o,depth:r,colSpan:n,rowSpan:l,index:s,kFirst:i,groupable:d,children:c,...h}=e;return c.length?{children:t(c),...h}:h}));return t(e)}get flatData(){const{data:e=[],rowHeight:t=0}=this.props;let a=0;const o=this.updateOnScroll&&this.prevData===e&&this.tbodyOffsetTop>0&&this.flattedData.length?this.flattedData:r.flatData(e,this.expandedSubItems,e=>{const o={height:t,offsetTop:a};return a+=o.height,o});return this.prevData=e,this.flattedData=o,o}selectionChange(e){if(this.props.onSelectionChange){const{event:t,item:a,dataIndex:o,columnIndex:n}=e,{mode:l,cell:s}=r.getSelectionOptions(this.props.selectable),i={...this.getArguments(t.syntheticEvent),dataItem:a.dataItem,level:a.level,startColIndex:n,endColIndex:n,startRowIndex:o,endRowIndex:o,dataItems:this.getLeafDataItems(),altKey:!1,ctrlKey:!1,shiftKey:!1,metaKey:!1,mode:l,cell:s,isDrag:!1,componentId:this._treeListId,selectedField:this.props.selectedField||""};this.props.onSelectionChange.call(void 0,i)}}raiseDataEvent(e,t,a){const o=this.props.onDataStateChange;if(e)e.call(void 0,{...this.getArguments(a),...t});else if(o){const e={...this.getArguments(a),dataState:{...this.getDataState(),...t}};o.call(void 0,e)}}getDataState(){return{filter:this.props.filter,sort:this.props.sort}}getArguments(e){return{nativeEvent:e&&e.nativeEvent,syntheticEvent:e,target:this}}};X.propTypes={data:a.array,resizable:a.bool,reorderable:a.bool,sortable:a.oneOfType([a.bool,a.shape({mode:a.oneOf(["single","multiple"]),allowUnsort:a.bool})]),onSortChange:a.func,sort:a.array,columns:a.arrayOf(a.object),columnVirtualization:a.bool,filter:a.array,onFilterChange:a.func,filterRow:a.any,toolbar:a.any,noRecords:a.any,onExpandChange:a.func,expandField:a.string,subItemsField:a.string,selectedField:a.string,onSelectionChange:a.func,onHeaderSelectionChange:a.func,onRowClick:a.func,onItemChange:a.func,editField:a.string,scrollable:a.oneOf(["none","scrollable","virtual"]),rowHeight:a.number,style:a.object,tableProps:a.object,pager:a.any,skip:a.number,take:a.number,onPageChange:a.func,onDataStateChange:a.func,onColumnResize:a.func,onColumnReorder:a.func,dataItemKey:a.string,navigatable:a.bool},X.contextType=r.TableKeyboardNavigationContext;let G=X;const Y=e=>{const t=p.useCallback(t=>{e.selectionChange&&e.selectionChange({syntheticEvent:t})},[e.selectionChange]),a=o.useId(),n=o.getNestedValue(e.field,e.dataItem),l=r.useTableKeyboardNavigation(e.id),s=p.createElement("td",{style:e.style,className:o.classNames("k-table-td",e.className),"aria-colindex":e.ariaColumnIndex,role:"gridcell",...l},p.createElement("input",{checked:"boolean"==typeof n&&n,id:a,type:"checkbox",className:"k-checkbox",onChange:t}),p.createElement("label",{className:"k-checkbox-label",htmlFor:a}));return e.render?e.render.call(void 0,s,e):s};Y.displayName="KendoReactTreeListSelectionCell";let J=class extends p.Component{constructor(){super(...arguments),this._inputId=o.guid()}render(){return p.createElement(r.HeaderSelectionCell,{inputId:this._inputId,...this.props})}};const Q=e=>e.visible&&o.canUseDOM?u.createPortal(p.createElement("div",{className:"k-header k-drag-clue",style:{display:"block",position:"absolute",zIndex:2e4,padding:"8px 12px",top:e.top+"px",left:e.left+"px"}},p.createElement(o.IconWrap,{className:o.classNames("k-drag-status"),name:e.allowDrop?"plus":"cancel",icon:e.allowDrop?l.plusIcon:l.cancelIcon}),e.text),document.body):null;function Z(e,t,a){const o=a?a.elementFromPoint(e.clientX,e.clientY):null;return t&&o?o.closest(t):null}const ee={visible:!1,top:0,left:0,text:"",allowDrop:!1};class te extends p.Component{constructor(){super(...arguments),this.state={clueProps:{...ee}},this.draggable=p.createRef(),this.dragged=null,this.draggedOver=null,this.onPress=()=>this.dragged=this.props.level,this.onDrag=e=>{if(!o.canUseDOM)return;const t=this.draggable.current&&this.draggable.current.element,a=t?t.ownerDocument:document;if(!a)return;const r=e.event,n=this.dragged;if(t&&n){!r.isTouch&&"scroll"!==r.type&&r.originalEvent.preventDefault();const e=this.props.levels[function(e,t,a){if(!e.originalEvent)return-1;const o=Z(e,"tr",a);if(o){const e=t?t.childNodes:[];for(let t=0;t<e.length;t++)if(e[t]===o)return t}return-1}(r,t.parentNode,a)];this.draggedOver=e;const o=e?!n.every((t,a)=>t===e[a]):!!Z(r,"k-grid",a);this.setState({clueProps:{visible:!0,top:r.pageY+10,left:r.pageX,text:t.innerText,allowDrop:o}}),this.props.onDrag&&this.props.onDrag.call(void 0,{nativeEvent:r.originalEvent,dragged:n,draggedOver:e,draggedItem:this.props.dataItem})}},this.onRelease=e=>{const t=e.event;if(this.dragged){const e=[...this.dragged],a=this.draggedOver&&[...this.draggedOver],o=this.state.clueProps.allowDrop;this.dragged=null,this.draggedOver=null,this.setState({clueProps:{...ee}});const r=this.props.dataItem;o&&this.props.onDrop&&this.props.onDrop.call(void 0,{nativeEvent:t.originalEvent,dragged:e,draggedOver:a,draggedItem:r})}}}render(){const{clueProps:e}=this.state;return p.createElement(p.Fragment,null,p.createElement(o.Draggable,{ref:this.draggable,onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},p.createElement(W,{...this.props})),p.createElement(Q,{...e}))}}const ae=p.forwardRef((e,t)=>{const{className:a,...r}=e,n=p.useRef(null),l=p.useRef(null);p.useImperativeHandle(l,()=>({element:n.current,props:e})),p.useImperativeHandle(t,()=>l.current);const s=p.useMemo(()=>o.classNames("k-grid-toolbar",a),[a]);return p.createElement(i.Toolbar,{id:e.id,ref:e=>{e&&(n.current=e.element)},className:s,...r},e.children)});ae.displayName="KendoReactTreeListToolbar";const oe=[{text:N,operator:"contains"},{text:D,operator:"doesnotcontain"},{text:y,operator:"eq"},{text:E,operator:"neq"},{text:k,operator:"startswith"},{text:L,operator:"endswith"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"},{text:w,operator:"isempty"},{text:T,operator:"isnotempty"}],re=[{text:y,operator:"eq"},{text:E,operator:"neq"},{text:O,operator:"gte"},{text:F,operator:"gt"},{text:K,operator:"lte"},{text:P,operator:"lt"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"}],ne=[{text:y,operator:"eq"},{text:E,operator:"neq"},{text:H,operator:"gte"},{text:B,operator:"gt"},{text:j,operator:"lt"},{text:q,operator:"lte"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"}],le=[{text:A,operator:""},{text:M,operator:!0},{text:z,operator:!1}];function se(e,t){return{clearButtonTitle:e.toLanguageString(I,_[I]),operators:t.map(t=>({text:e.toLanguageString(t.text,_[t.text]),operator:t.operator}))}}const ie=e=>{const t=p.useCallback(t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t,value:t.target.value})},[e.onChange,e.dataItem,e.level,e.field]),a=r.useTableKeyboardNavigation(e.id),n=o.classNames({"k-selected":e.isSelected},e.className),l=p.createElement("td",{style:e.style,className:n,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...a,[b]:e.colIndex},p.createElement("input",{style:{width:"100%"},className:"k-input",value:o.getNestedValue(e.field,e.dataItem)||"",onChange:t}));return e.render?e.render.call(void 0,l,e):l};ie.displayName="KendoReactTreeListTextEditor";const de=e=>{const t=p.useCallback(t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t.syntheticEvent,value:t.value})},[e.onChange,e.dataItem,e.level,e.field]),a=o.getNestedValue(e.field,e.dataItem),n=r.useTableKeyboardNavigation(e.id),l=o.classNames({"k-selected":e.isSelected},e.className),s=p.createElement("td",{style:e.style,className:l,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...n,[b]:e.colIndex},p.createElement(d.NumericTextBox,{width:"100%",value:void 0===a?null:a,onChange:t}));return e.render?e.render.call(void 0,s,e):s};de.displayName="KendoReactTreeListNumericEditor";const ce=e=>{const t=p.useCallback(t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t,value:t.target.checked})},[e.onChange,e.dataItem,e.level,e.field]),a=o.useId(),n=r.useTableKeyboardNavigation(e.id),l=o.classNames({"k-selected":e.isSelected},e.className),s=p.createElement("td",{style:e.style,className:l,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...n,[b]:e.colIndex},p.createElement("input",{checked:o.getNestedValue(e.field,e.dataItem)||!1,id:a,type:"checkbox",className:"k-checkbox",onChange:t}),p.createElement("label",{className:"k-checkbox-label",htmlFor:a}));return e.render?e.render.call(void 0,s,e):s};ce.displayName="KendoReactTreeListBooleanEditor";const he=e=>{const t=p.useCallback(t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t.syntheticEvent,value:t.value})},[e.onChange,e.dataItem,e.level,e.field]),a=r.useTableKeyboardNavigation(e.id),n=o.classNames({"k-selected":e.isSelected},e.className),l=p.createElement("td",{style:e.style,className:n,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...a,[b]:e.colIndex},p.createElement(c.DatePicker,{width:"100%",value:o.getNestedValue(e.field,e.dataItem),onChange:t}));return e.render?e.render.call(void 0,l,e):l};he.displayName="KendoReactTreeListDateEditor",Object.defineProperty(e,"getNestedValue",{enumerable:!0,get:function(){return o.getNestedValue}}),Object.defineProperty(e,"mapTree",{enumerable:!0,get:function(){return o.mapTree}}),Object.defineProperty(e,"mapTreeItem",{enumerable:!0,get:function(){return o.mapTreeItem}}),Object.defineProperty(e,"createDataTree",{enumerable:!0,get:function(){return r.createDataTree}}),Object.defineProperty(e,"extendDataItem",{enumerable:!0,get:function(){return r.extendDataItem}}),Object.defineProperty(e,"filterBy",{enumerable:!0,get:function(){return r.filterBy}}),Object.defineProperty(e,"flatData",{enumerable:!0,get:function(){return r.flatData}}),Object.defineProperty(e,"getItemPath",{enumerable:!0,get:function(){return r.getItemPath}}),Object.defineProperty(e,"getSelectedState",{enumerable:!0,get:function(){return r.getSelectedState}}),Object.defineProperty(e,"getSelectedStateFromKeyDown",{enumerable:!0,get:function(){return r.getSelectedStateFromKeyDown}}),Object.defineProperty(e,"modifySubItems",{enumerable:!0,get:function(){return r.modifySubItems}}),Object.defineProperty(e,"moveTreeItem",{enumerable:!0,get:function(){return r.moveTreeItem}}),Object.defineProperty(e,"orderBy",{enumerable:!0,get:function(){return r.orderBy}}),Object.defineProperty(e,"removeItems",{enumerable:!0,get:function(){return r.removeItems}}),Object.defineProperty(e,"setSelectedState",{enumerable:!0,get:function(){return r.setSelectedState}}),Object.defineProperty(e,"treeToFlat",{enumerable:!0,get:function(){return r.treeToFlat}}),e.TREELIST_COL_INDEX_ATTRIBUTE=b,e.TREELIST_PREVENT_SELECTION_ELEMENT=C,e.TREELIST_ROW_INDEX_ATTRIBUTE=v,e.TreeList=G,e.TreeListBooleanEditor=ce,e.TreeListBooleanFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.BooleanFilterCell,{ariaLabel:"boolean filter",...se(n.useLocalization(),t||le),...a})},e.TreeListCell=x,e.TreeListDateEditor=he,e.TreeListDateFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.DateFilterCell,{ariaLabel:"date filter",...se(n.useLocalization(),t||ne),...a})},e.TreeListDraggableRow=te,e.TreeListHeaderCell=e=>p.createElement(r.HeaderCell,{...e}),e.TreeListHeaderSelectionCell=J,e.TreeListNoRecords=U,e.TreeListNumericEditor=de,e.TreeListNumericFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.NumericFilterCell,{ariaLabel:"numeric filter",...se(n.useLocalization(),t||re),...a})},e.TreeListRow=W,e.TreeListSelectionCell=Y,e.TreeListTextEditor=ie,e.TreeListTextFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.TextFilterCell,{ariaLabel:"text filter",...se(n.useLocalization(),t||oe),...a})},e.TreeListToolbar=ae,e.setHeaderRowsTop=g,e.tableRowsVirtualization=f});
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-data-tools"),require("@progress/kendo-react-intl"),require("@progress/kendo-svg-icons"),require("react-dom"),require("@progress/kendo-react-buttons"),require("@progress/kendo-react-inputs"),require("@progress/kendo-react-dateinputs")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-data-tools","@progress/kendo-react-intl","@progress/kendo-svg-icons","react-dom","@progress/kendo-react-buttons","@progress/kendo-react-inputs","@progress/kendo-react-dateinputs"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTreelist={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactDataTools,e.KendoReactIntl,e.KendoSvgIcons,e.ReactDOM,e.KendoReactButtons,e.KendoReactInputs,e.KendoReactDateinputs)}(this,function(e,t,o,a,r,n,l,s,i,d,c){"use strict";function h(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:function(){return e[o]}})}}),t.default=e,Object.freeze(t)}var p=h(t),u=h(s);function g(e,t,o){const a=Array.from(e.tHead&&e.tHead.rows||[]),r=[t];let n;const l=o||(e=>window.getComputedStyle(e).height||void 0);a.forEach(e=>{const t=l(e);r.push(function(e){return void 0!==e&&("number"==typeof e||/px$/i.test(String(e)))}(t)?parseFloat(String(t)):e.offsetHeight)});for(let e=0;e<a.length;e++)n=r.slice(0,e+1).reduce((e,t)=>e+t),Array.from(a[e].cells).forEach(e=>e.style.top=n+"px")}const m=1e6;function f(e){const{rows:t,tableViewPortHeight:o,scrollTop:a}=e;if(0===t.length)return[];const r=t[0].height,n=Math.min(Math.round(a/r),t.length),l=Math.round(o/r),s=Math.max(0,n-l),i=Math.min(t.length,n+2*l),d=t.slice(s,i),c=d[d.length-1];return s>0&&d.unshift({dataItem:{},level:[m],offsetTop:0,height:d[0].offsetTop,levelCount:0}),i<t.length-1&&d.push({dataItem:{},level:[m,m],offsetTop:c.offsetTop+c.height,height:(t.length-i)*r,levelCount:0}),d}const v=r.TABLE_ROW_INDEX_ATTRIBUTE,b=r.TABLE_COL_INDEX_ATTRIBUTE,C=r.TABLE_PREVENT_SELECTION_ELEMENT,x=e=>{const{hasChildren:t,level:o=[0],expanded:s,dataItem:i,format:d,id:c,ariaColumnIndex:h,isSelected:u}=e,g=a.getNestedValue(e.field,i),m=n.useInternationalization(),f=r.useTableKeyboardNavigation(c);let v="";const x=p.useCallback(t=>{t.isDefaultPrevented()||t.keyCode===a.Keys.enter&&e.expandable&&(t.preventDefault(),e.onExpandChange(t,i,o))},[e.expandable,i,o]);null!=g&&(v=d?m.format(d,g):g.toString());const I=[];if(e.expandable){const r=e=>p.createElement("span",{key:e,className:"k-treelist-toggle k-icon k-svg-icon"},p.createElement("svg",{"aria-hidden":"true",focusable:"false",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"}));I.push(...o.slice(1).map((e,t)=>r(t))),t?I.push(p.createElement(a.IconWrap,{className:"k-treelist-toggle",name:s?"chevron-down":"chevron-right",icon:s?l.chevronDownIcon:l.chevronRightIcon,key:"expand-collapse",onClick:t=>e.onExpandChange(t.syntheticEvent||t,i,o),[C]:!0})):I.push(r(I.length))}const y=p.createElement("td",{style:e.style,className:a.classNames("k-table-td",e.className,{"k-text-nowrap":e.expandable,"k-selected":u}),colSpan:e.colSpan,"aria-colindex":h,"aria-expanded":t?s:void 0,"aria-selected":u,role:"gridcell",onKeyDown:x,[b]:e.colIndex,...f},I,v);return e.render?e.render.call(void 0,y,e):y};x.displayName="KendoReactTreeListCell";const I="treelist.filterClearButton",y="treelist.filterEqOperator",E="treelist.filterNotEqOperator",S="treelist.filterIsNullOperator",R="treelist.filterIsNotNullOperator",w="treelist.filterIsEmptyOperator",T="treelist.filterIsNotEmptyOperator",k="treelist.filterStartsWithOperator",N="treelist.filterContainsOperator",D="treelist.filterNotContainsOperator",L="treelist.filterEndsWithOperator",O="treelist.filterGteOperator",F="treelist.filterGtOperator",K="treelist.filterLteOperator",P="treelist.filterLtOperator",M="treelist.filterIsTrue",z="treelist.filterIsFalse",A="treelist.filterBooleanAll",H="treelist.filterAfterOrEqualOperator",B="treelist.filterAfterOperator",j="treelist.filterBeforeOperator",q="treelist.filterBeforeOrEqualOperator",V="treelist.noRecords",_={[I]:"Clear",[y]:"Is equal to",[E]:"Is not equal to",[S]:"Is null",[R]:"Is not null",[w]:"Is empty",[T]:"Is not empty",[k]:"Starts with",[N]:"Contains",[D]:"Does not contain",[L]:"Ends with",[O]:"Is greater than or equal to",[F]:"Is greater than",[K]:"Is less than or equal to",[P]:"Is less than",[M]:"Is true",[z]:"Is false",[A]:"(All)",[H]:"Is after or equal to",[B]:"Is after",[j]:"Is before",[q]:"Is before or equal to",[V]:"No records available"};let U=class extends p.Component{render(){return this.props.children||n.provideLocalizationService(this).toLanguageString(V,_[V])}};n.registerForLocalization(U);const W=p.forwardRef((e,t)=>{const{isSelected:o,rowHeight:r,isAltRow:n,expanded:l,ariaRowIndex:s,level:i,ariaSetSize:d,ariaPosInSet:c}=e,h=a.classNames("k-table-row","k-master-row",{"k-selected":o,"k-table-alt-row":n}),u=p.useMemo(()=>void 0!==r?{height:r+"px"}:void 0,[r]),g=p.createElement("tr",{onClick:e.onClick,onDoubleClick:e.onDoubleClick,onContextMenu:e.onContextMenu,className:h,style:u,ref:t,"aria-expanded":l,role:"row","aria-rowindex":s,"aria-level":i.length,"aria-posinset":c,"aria-setsize":d,[v]:e.rowIndex},e.children);return p.createElement(p.Fragment,null,e.render?e.render.call(void 0,g,e):g)});W.displayName="KendoReactTreeListRow";const $=Object.freeze({name:"@progress/kendo-react-treelist",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"15.0.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),X=class extends p.Component{constructor(e){super(e),this.element=null,this.wrapperScrollLeft=0,this.wrapperScrollTop=0,this.updateOnScroll=!1,this.tbodyOffsetTop=0,this.prevData=[],this.flattedData=[],this.extendedColumn=[],this.columnsMap=[],this.contextStateRef={current:void 0},this.navigationStateRef={current:void 0},this.showLicenseWatermark=!1,this.licenseMessage=void 0,this.scrollIntoView=e=>{if(!this.element)return;const{rowIndex:t=0}=e,{scrollable:o,rowHeight:a=0}=this.props;if("virtual"===o||a)this.element.scroll(0,(t-1)*a);else{const e=this.element.querySelector(`tbody > tr:nth-child(${t})`);if(e){const t=e.offsetTop-this.tbodyOffsetTop;this.element.scroll(0,t)}}},this.getExtendedColumn=a.memoizeOne((e,t)=>r.readColumns(e,{prevId:0,idPrefix:t})),this.getColumnsMap=a.memoizeOne((e,t)=>r.mapColumns(e,t)),this.onKeyDown=e=>{if(r.tableKeyboardNavigation.onKeyDown(e,{navigatable:!1,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),this.props.onKeyDown){const{mode:t,cell:o}=r.getSelectionOptions(this.props.selectable),a={dataItems:this.getLeafDataItems(),mode:t,cell:o,componentId:this._treeListId,selectedField:this.props.selectedField,...this.getArguments(e)};this.props.onKeyDown.call(void 0,a)}},this.onFocus=e=>{r.tableKeyboardNavigation.onFocus(e,{contextStateRef:this.contextStateRef})},this.onRowDrag=e=>{this.props.onRowDrag&&this.props.onRowDrag.call(void 0,{...e,target:this})},this.onRowDrop=e=>{this.props.onRowDrop&&this.props.onRowDrop.call(void 0,{...e,target:this})},this.columnReorder=(e,t,o)=>{const a=this.extendedColumn[e].depth,r=e=>{do{e++}while(e<this.extendedColumn.length&&this.extendedColumn[e].depth>a);return e},n=this.extendedColumn.splice(e,r(e)-e);if(this.extendedColumn.splice(e<t?r(t-n.length):t,0,...n),this.extendedColumn.filter(e=>e.declarationIndex>=0).forEach((e,t)=>e.orderIndex=t),this.props.onColumnReorder){const e={target:this,columns:this.columns,nativeEvent:o};this.props.onColumnReorder.call(void 0,e)}},this.onResize=(e,t,o,a,r)=>{if(this.props.onColumnResize){const n=this.extendedColumn.filter(e=>0===e.children.length).reduce((e,t)=>e+parseFloat(String(t.width)),0),l={columns:this.columns,totalWidth:n,index:e,nativeEvent:a,newWidth:t,oldWidth:o,end:r,target:this};this.props.onColumnResize.call(void 0,l)}},this.handleOnScroll=e=>{const t=e.currentTarget.scrollLeft,o=e.currentTarget.scrollTop,{columnVirtualization:a,scrollable:r,rowHeight:n=0}=this.props,l=n;let s=!1;a&&Math.abs(this.wrapperScrollLeft-t)>0&&(this.wrapperScrollLeft=t,s=!0),"virtual"===r&&Math.abs(this.wrapperScrollTop-o)>l&&(this.wrapperScrollTop=o,s=!0),s&&(this.updateOnScroll=!0,this.forceUpdate())},this.calculateSizes=e=>{if(!e||"none"===this.props.scrollable)return;const t=Array.from(e.childNodes),o=t.find(e=>"TABLE"===e.nodeName),a=this.props.toolbar&&t.find(e=>1===e.nodeType&&e.classList.contains("k-grid-toolbar"));let r=0;if(a){const e=a.style.boxSizing;a.style.boxSizing="border-box",r=parseFloat(String(window.getComputedStyle(a).height))||a.offsetHeight,a.style.boxSizing=e,a.getAttribute("style")||a.removeAttribute("style")}this.tbodyOffsetTop=o.tBodies[0].offsetTop,g(o,r)},this.itemChange=e=>{const t=this.props.onItemChange;if(e.field===this.props.expandField){const t=this.props.onExpandChange;if(t){const o={...this.getArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,value:e.value};t.call(void 0,o)}return}if(t){const o={...this.getArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,field:e.field,value:e.value};t.call(void 0,o)}},this.onHeaderSelectionChange=e=>{if(this.props.onHeaderSelectionChange){const t={field:e.field,nativeEvent:e.syntheticEvent&&e.syntheticEvent.nativeEvent,syntheticEvent:e.syntheticEvent,target:this,dataItems:this.getLeafDataItems()};this.props.onHeaderSelectionChange.call(void 0,t)}},this.selectionRelease=e=>{if(this.props.onSelectionChange){const t={syntheticEvent:void 0,target:this,selectedField:this.props.selectedField||"",componentId:this._treeListId,dataItems:this.getLeafDataItems(),dataItem:null,level:[],...e};this.props.onSelectionChange.call(void 0,t)}},this.sortChange=(e,t,o)=>{this.raiseDataEvent(this.props.onSortChange,{sort:t,field:o},e)},this.headerFilterChange=(e,t,o)=>{this.raiseDataEvent(this.props.onFilterChange,{filter:t,field:o},e)},this.filterChange=e=>{const{filter:t,field:o}=e;this.raiseDataEvent(this.props.onFilterChange,{filter:t,field:o},e.syntheticEvent)},this.columnMenuFilterChange=(e,t,o)=>{const{onColumnMenuFilterChange:a}=this.props;if(!a)return;const r={syntheticEvent:e,filter:t,field:o,target:this,nativeEvent:e.nativeEvent};a.call(void 0,r)},this.expandChange=(e,t,o)=>{const{expandField:a,onExpandChange:r}=this.props;if(a&&r){const a={...this.getArguments(e),dataItem:t,level:o,value:this.expanded(t)};r.call(void 0,a)}},this.rowClick=(e,t)=>{if(this.props.onRowClick&&"TD"===e.target.nodeName){const o={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowClick.call(void 0,o)}},this.rowDoubleClick=(e,t)=>{if(this.props.onRowDoubleClick&&"TD"===e.target.nodeName){const o={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowDoubleClick.call(void 0,o)}},this.rowContextMenu=(e,t)=>{if(this.props.onRowContextMenu&&"TD"===e.target.nodeName){const o={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowContextMenu.call(void 0,o)}},this.onPageChange=e=>{if(this.props.onPageChange){const t={...this.getArguments(e.syntheticEvent),skip:e.skip,take:e.take};this.props.onPageChange.call(void 0,t)}},this.expandedSubItems=e=>{const t=[];return this.expanded(e)&&this.hasChildren(e)&&t.push(...a.getNestedValue(this.props.subItemsField,e)),t},this.getLeafDataItems=()=>this.flatData.map(e=>e.dataItem),this.expanded=e=>!!a.getNestedValue(this.props.expandField,e),this.hasChildren=e=>!!a.getNestedValue(this.props.subItemsField,e),this.showLicenseWatermark=!a.validatePackage($,{component:"TreeList"}),this.licenseMessage=a.getLicenseMessage($),this.dragLogic=new r.CommonDragLogic(this.columnReorder,a.noop,a.noop),this.columnResize=new r.ColumnResize(this.onResize.bind(this)),r.tableKeyboardNavigation.onConstructor({navigatable:!!e.navigatable,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}get _treeListId(){return this.props.id+"-treelist"}get document(){if(a.canUseDOM)return this.element&&this.element.ownerDocument||document}componentDidMount(){this.calculateSizes(this.element),r.tableKeyboardNavigation.onComponentDidMount({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}getSnapshotBeforeUpdate(){return r.tableKeyboardNavigation.onGetSnapshotBeforeUpdate({document:this.document,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),null}componentDidUpdate(e){e.columns!==this.props.columns&&this.calculateSizes(this.element),r.tableKeyboardNavigation.onComponentDidUpdate({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}componentWillUnmount(){this.columnsMap=[],this.prevData=[],this.flattedData=[],this.updateOnScroll=!1,this.getExtendedColumn.clear(),this.getColumnsMap.clear()}render(){const{columns:e=[],filterRow:t,scrollable:o="scrollable",resizable:n=!1,reorderable:l=!1,skip:s,take:i}=this.props,d=e.some(e=>!!e.filter||!!e.filterCell)||void 0!==t,c=t||r.FilterRow,h=r.tableKeyboardNavigationTools.getIdPrefix(this.navigationStateRef),u=this.getExtendedColumn(e,h),g=u.length!==this.extendedColumn.length;this.extendedColumn=u,this.columnsMap=this.getColumnsMap(this.extendedColumn,g);const m=this.extendedColumn.filter(e=>0===e.children.length);this.columnResize.columns=this.extendedColumn,this.columnResize.resizable=n,this.dragLogic.columns=this.extendedColumn,this.dragLogic.reorderable=l,this.dragLogic.groupable=!1;const v=p.createElement(r.Header,{headerRow:p.createElement(r.HeaderRow,{sort:this.props.sort,sortable:this.props.sortable,sortChange:this.sortChange,selectionChange:this.onHeaderSelectionChange,columns:this.extendedColumn,columnsMap:this.columnsMap,cellRender:this.props.headerCellRender,columnResize:this.columnResize,columnMenu:this.props.columnMenu,columnMenuFilter:this.props.columnMenuFilter,columnMenuFilterChange:this.columnMenuFilterChange,pressHandler:this.dragLogic.pressHandler,dragHandler:this.dragLogic.dragHandler,releaseHandler:this.dragLogic.releaseHandler,filterChange:this.headerFilterChange}),reorderable:this.props.reorderable,filterRow:d&&p.createElement(c,{columns:m,filter:this.props.filter,filterChange:this.filterChange,sort:this.props.sort,ariaRowIndex:this.columnsMap.length+1})||void 0,columnResize:this.columnResize}),b=this.props.style||{},{colSpans:C,hiddenColumns:I}=r.tableColumnsVirtualization({enabled:this.props.columnVirtualization,columns:m,scrollLeft:this.wrapperScrollLeft,tableViewPortWidth:parseFloat((b.width||"").toString())}),y=(e,t,o,a,n,l)=>m.map((s,i)=>{if(I[i])return null;const d=s.id?s.id:i,c=`${s.className?s.className+" ":""}${s.locked?"k-grid-content-sticky":""}`,u={id:r.tableKeyboardNavigationTools.generateNavigatableId(`${o}-${String(i)}`,h),colSpan:C[i],dataItem:e.dataItem,field:s.field,format:s.format,className:c||void 0,render:this.props.cellRender,onChange:this.itemChange,selectionChange:this.props.onSelectionChange?t=>{this.selectionChange({event:t,item:e,columnIndex:i,dataIndex:n})}:void 0,level:e.level,expandable:s.expandable,expanded:a,hasChildren:this.hasChildren(e.dataItem),onExpandChange:this.expandChange,colIndex:i,ariaColumnIndex:s.ariaColumnIndex,style:void 0!==s.left&&{left:s.left,right:s.right,borderRightWidth:s.rightBorder?"1px":""}||{},isSelected:Array.isArray(l)&&l.indexOf(i)>-1};return t&&s.editCell?p.createElement(s.editCell,{key:d,...u,onChange:this.itemChange}):s.cell?p.createElement(s.cell,{key:d,...u}):p.createElement(x,{key:d,...u})});let E=this.flatData;const S=E.length;void 0!==s&&void 0!==i&&(E=E.slice(s,s+i)),"virtual"===o&&(E=f({rows:E,tableViewPortHeight:parseFloat((b.height||b.maxHeight||"").toString()),scrollTop:this.wrapperScrollTop}),this.updateOnScroll=!1);const R=E.map(e=>e.level),w=this.columnsMap.length+(d?1:0)+1,T=E.length>0&&E.map((e,t)=>{const r=a.getNestedValue(this.props.editField,e.dataItem),n=this.props.dataItemKey&&a.getter(this.props.dataItemKey)(e.dataItem),l=String(n||e.level.join(".")),s=this.expanded(e.dataItem),i=this.props.selectedField?a.getNestedValue(this.props.selectedField,e.dataItem):void 0,d={key:l,level:e.level,levels:R,dataItem:e.dataItem,selectedField:this.props.selectedField,rowHeight:"virtual"===o?e.height:this.props.rowHeight,render:this.props.rowRender,onDrop:this.onRowDrop,onDrag:this.onRowDrag,onClick:t=>this.rowClick(t,e),onDoubleClick:t=>this.rowDoubleClick(t,e),onContextMenu:t=>this.rowContextMenu(t,e),isAltRow:t%2!=0,expanded:s,rowIndex:t,ariaRowIndex:w+t,ariaSetSize:e.levelCount,ariaPosInSet:e.level[e.level.length-1]+1,isSelected:"boolean"==typeof i&&i},c=this.props.editRow,h=this.props.row||W,u=y(e,r,l,s,t,i);return r&&c?p.createElement(c,{...d,key:d.key},u):p.createElement(h,{...d,key:d.key},u)})||p.createElement("tr",{className:"k-table-row k-grid-norecords"},p.createElement("td",{colSpan:m.length},this.props.noRecords||p.createElement(U,null))),k=e=>this.props.sort&&this.props.sort.some(t=>t.field===e),N=p.createElement("colgroup",{ref:e=>{this.columnResize.colGroupMain=e}},m.map((e,t)=>p.createElement("col",{key:t.toString(),className:k(e.field)?"k-sorted":void 0,style:void 0!==e.width?{width:e.width}:void 0}))),D=this.props.columnVirtualization||"virtual"===this.props.scrollable,L=this.props.selectable&&this.props.selectable.drag?"none":void 0,O=this.props.tableProps||{};return p.createElement(r.TableKeyboardNavigationContext.Provider,{value:this.contextStateRef.current},p.createElement("div",{id:this.props.id,style:this.props.style,className:a.classNames("k-grid","k-treelist",this.props.className,{"k-treelist-scrollable":"none"!==o}),ref:e=>{this.element=e},onScroll:D?this.handleOnScroll:void 0,onKeyDown:this.onKeyDown,onFocus:this.onFocus,"aria-rowcount":S,"aria-colcount":m.length,role:"treegrid",...r.tableKeyboardNavigationScopeAttributes},this.props.toolbar,p.createElement(r.TableSelection,{selectable:this.props.selectable,onRelease:this.selectionRelease},p.createElement("table",{className:"k-table k-grid-table",...O,style:{...O.style||{},userSelect:L},role:"presentation"},N,v,p.createElement("tbody",{className:"k-table-tbody",...r.tableKeyboardNavigationBodyAttributes,role:"presentation"},T))),this.props.pager&&p.createElement(this.props.pager,{className:"k-grid-pager",total:S,skip:s,take:i,onPageChange:this.onPageChange}),l&&p.createElement(p.Fragment,null,p.createElement(r.DropClue,{ref:this.dragLogic.refDropElementClue}),p.createElement(r.DragClue,{ref:this.dragLogic.refDragElementClue})),this.showLicenseWatermark&&p.createElement(a.WatermarkOverlay,{message:this.licenseMessage})))}get columns(){const e=this.extendedColumn.filter(e=>e.declarationIndex>=0&&-1===e.parentIndex),t=e=>(e.sort((e,t)=>e.declarationIndex-t.declarationIndex),e.map(e=>{const{declarationIndex:o,parentIndex:a,depth:r,colSpan:n,rowSpan:l,index:s,kFirst:i,groupable:d,children:c,...h}=e;return c.length?{children:t(c),...h}:h}));return t(e)}get flatData(){const{data:e=[],rowHeight:t=0}=this.props;let o=0;const a=this.updateOnScroll&&this.prevData===e&&this.tbodyOffsetTop>0&&this.flattedData.length?this.flattedData:r.flatData(e,this.expandedSubItems,e=>{const a={height:t,offsetTop:o};return o+=a.height,a});return this.prevData=e,this.flattedData=a,a}selectionChange(e){if(this.props.onSelectionChange){const{event:t,item:o,dataIndex:a,columnIndex:n}=e,{mode:l,cell:s}=r.getSelectionOptions(this.props.selectable),i={...this.getArguments(t.syntheticEvent),dataItem:o.dataItem,level:o.level,startColIndex:n,endColIndex:n,startRowIndex:a,endRowIndex:a,dataItems:this.getLeafDataItems(),altKey:!1,ctrlKey:!1,shiftKey:!1,metaKey:!1,mode:l,cell:s,isDrag:!1,componentId:this._treeListId,selectedField:this.props.selectedField||""};this.props.onSelectionChange.call(void 0,i)}}raiseDataEvent(e,t,o){const a=this.props.onDataStateChange;if(e)e.call(void 0,{...this.getArguments(o),...t});else if(a){const e={...this.getArguments(o),dataState:{...this.getDataState(),...t}};a.call(void 0,e)}}getDataState(){return{filter:this.props.filter,sort:this.props.sort}}getArguments(e){return{nativeEvent:e&&e.nativeEvent,syntheticEvent:e,target:this}}};X.propTypes={data:o.array,resizable:o.bool,reorderable:o.bool,sortable:o.oneOfType([o.bool,o.shape({mode:o.oneOf(["single","multiple"]),allowUnsort:o.bool})]),onSortChange:o.func,sort:o.array,columns:o.arrayOf(o.object),columnVirtualization:o.bool,filter:o.array,onFilterChange:o.func,filterRow:o.any,toolbar:o.any,noRecords:o.any,onExpandChange:o.func,expandField:o.string,subItemsField:o.string,selectedField:o.string,onSelectionChange:o.func,onHeaderSelectionChange:o.func,onRowClick:o.func,onItemChange:o.func,editField:o.string,scrollable:o.oneOf(["none","scrollable","virtual"]),rowHeight:o.number,style:o.object,tableProps:o.object,pager:o.any,skip:o.number,take:o.number,onPageChange:o.func,onDataStateChange:o.func,onColumnResize:o.func,onColumnReorder:o.func,dataItemKey:o.string,navigatable:o.bool},X.contextType=r.TableKeyboardNavigationContext;let G=X;const Y=p.forwardRef((e,t)=>{const[o,r]=a.useMergedRef(t);return a.useWebMcpRegister("treelist",o,e,e.webMcp),p.createElement(G,{...e,ref:r})});Y.displayName="KendoReactTreeList";const J=e=>{const t=p.useCallback(t=>{e.selectionChange&&e.selectionChange({syntheticEvent:t})},[e.selectionChange]),o=a.useId(),n=a.getNestedValue(e.field,e.dataItem),l=r.useTableKeyboardNavigation(e.id),s=p.createElement("td",{style:e.style,className:a.classNames("k-table-td",e.className),"aria-colindex":e.ariaColumnIndex,role:"gridcell",...l},p.createElement("input",{checked:"boolean"==typeof n&&n,id:o,type:"checkbox",className:"k-checkbox",onChange:t}),p.createElement("label",{className:"k-checkbox-label",htmlFor:o}));return e.render?e.render.call(void 0,s,e):s};J.displayName="KendoReactTreeListSelectionCell";let Q=class extends p.Component{constructor(){super(...arguments),this._inputId=a.guid()}render(){return p.createElement(r.HeaderSelectionCell,{inputId:this._inputId,...this.props})}};const Z=e=>e.visible&&a.canUseDOM?u.createPortal(p.createElement("div",{className:"k-header k-drag-clue",style:{display:"block",position:"absolute",zIndex:2e4,padding:"8px 12px",top:e.top+"px",left:e.left+"px"}},p.createElement(a.IconWrap,{className:a.classNames("k-drag-status"),name:e.allowDrop?"plus":"cancel",icon:e.allowDrop?l.plusIcon:l.cancelIcon}),e.text),document.body):null;function ee(e,t,o){const a=o?o.elementFromPoint(e.clientX,e.clientY):null;return t&&a?a.closest(t):null}const te={visible:!1,top:0,left:0,text:"",allowDrop:!1};class oe extends p.Component{constructor(){super(...arguments),this.state={clueProps:{...te}},this.draggable=p.createRef(),this.dragged=null,this.draggedOver=null,this.onPress=()=>this.dragged=this.props.level,this.onDrag=e=>{if(!a.canUseDOM)return;const t=this.draggable.current&&this.draggable.current.element,o=t?t.ownerDocument:document;if(!o)return;const r=e.event,n=this.dragged;if(t&&n){!r.isTouch&&"scroll"!==r.type&&r.originalEvent.preventDefault();const e=this.props.levels[function(e,t,o){if(!e.originalEvent)return-1;const a=ee(e,"tr",o);if(a){const e=t?t.childNodes:[];for(let t=0;t<e.length;t++)if(e[t]===a)return t}return-1}(r,t.parentNode,o)];this.draggedOver=e;const a=e?!n.every((t,o)=>t===e[o]):!!ee(r,"k-grid",o);this.setState({clueProps:{visible:!0,top:r.pageY+10,left:r.pageX,text:t.innerText,allowDrop:a}}),this.props.onDrag&&this.props.onDrag.call(void 0,{nativeEvent:r.originalEvent,dragged:n,draggedOver:e,draggedItem:this.props.dataItem})}},this.onRelease=e=>{const t=e.event;if(this.dragged){const e=[...this.dragged],o=this.draggedOver&&[...this.draggedOver],a=this.state.clueProps.allowDrop;this.dragged=null,this.draggedOver=null,this.setState({clueProps:{...te}});const r=this.props.dataItem;a&&this.props.onDrop&&this.props.onDrop.call(void 0,{nativeEvent:t.originalEvent,dragged:e,draggedOver:o,draggedItem:r})}}}render(){const{clueProps:e}=this.state;return p.createElement(p.Fragment,null,p.createElement(a.Draggable,{ref:this.draggable,onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},p.createElement(W,{...this.props})),p.createElement(Z,{...e}))}}const ae=p.forwardRef((e,t)=>{const{className:o,...r}=e,n=p.useRef(null),l=p.useRef(null);p.useImperativeHandle(l,()=>({element:n.current,props:e})),p.useImperativeHandle(t,()=>l.current);const s=p.useMemo(()=>a.classNames("k-grid-toolbar",o),[o]);return p.createElement(i.Toolbar,{id:e.id,ref:e=>{e&&(n.current=e.element)},className:s,...r},e.children)});ae.displayName="KendoReactTreeListToolbar";const re=[{text:N,operator:"contains"},{text:D,operator:"doesnotcontain"},{text:y,operator:"eq"},{text:E,operator:"neq"},{text:k,operator:"startswith"},{text:L,operator:"endswith"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"},{text:w,operator:"isempty"},{text:T,operator:"isnotempty"}],ne=[{text:y,operator:"eq"},{text:E,operator:"neq"},{text:O,operator:"gte"},{text:F,operator:"gt"},{text:K,operator:"lte"},{text:P,operator:"lt"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"}],le=[{text:y,operator:"eq"},{text:E,operator:"neq"},{text:H,operator:"gte"},{text:B,operator:"gt"},{text:j,operator:"lt"},{text:q,operator:"lte"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"}],se=[{text:A,operator:""},{text:M,operator:!0},{text:z,operator:!1}];function ie(e,t){return{clearButtonTitle:e.toLanguageString(I,_[I]),operators:t.map(t=>({text:e.toLanguageString(t.text,_[t.text]),operator:t.operator}))}}const de=e=>{const t=p.useCallback(t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t,value:t.target.value})},[e.onChange,e.dataItem,e.level,e.field]),o=r.useTableKeyboardNavigation(e.id),n=a.classNames({"k-selected":e.isSelected},e.className),l=p.createElement("td",{style:e.style,className:n,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...o,[b]:e.colIndex},p.createElement("input",{style:{width:"100%"},className:"k-input",value:a.getNestedValue(e.field,e.dataItem)||"",onChange:t}));return e.render?e.render.call(void 0,l,e):l};de.displayName="KendoReactTreeListTextEditor";const ce=e=>{const t=p.useCallback(t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t.syntheticEvent,value:t.value})},[e.onChange,e.dataItem,e.level,e.field]),o=a.getNestedValue(e.field,e.dataItem),n=r.useTableKeyboardNavigation(e.id),l=a.classNames({"k-selected":e.isSelected},e.className),s=p.createElement("td",{style:e.style,className:l,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...n,[b]:e.colIndex},p.createElement(d.NumericTextBox,{width:"100%",value:void 0===o?null:o,onChange:t}));return e.render?e.render.call(void 0,s,e):s};ce.displayName="KendoReactTreeListNumericEditor";const he=e=>{const t=p.useCallback(t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t,value:t.target.checked})},[e.onChange,e.dataItem,e.level,e.field]),o=a.useId(),n=r.useTableKeyboardNavigation(e.id),l=a.classNames({"k-selected":e.isSelected},e.className),s=p.createElement("td",{style:e.style,className:l,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...n,[b]:e.colIndex},p.createElement("input",{checked:a.getNestedValue(e.field,e.dataItem)||!1,id:o,type:"checkbox",className:"k-checkbox",onChange:t}),p.createElement("label",{className:"k-checkbox-label",htmlFor:o}));return e.render?e.render.call(void 0,s,e):s};he.displayName="KendoReactTreeListBooleanEditor";const pe=e=>{const t=p.useCallback(t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t.syntheticEvent,value:t.value})},[e.onChange,e.dataItem,e.level,e.field]),o=r.useTableKeyboardNavigation(e.id),n=a.classNames({"k-selected":e.isSelected},e.className),l=p.createElement("td",{style:e.style,className:n,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...o,[b]:e.colIndex},p.createElement(c.DatePicker,{width:"100%",value:a.getNestedValue(e.field,e.dataItem),onChange:t}));return e.render?e.render.call(void 0,l,e):l};pe.displayName="KendoReactTreeListDateEditor";const ue=Y;Object.defineProperty(e,"getNestedValue",{enumerable:!0,get:function(){return a.getNestedValue}}),Object.defineProperty(e,"mapTree",{enumerable:!0,get:function(){return a.mapTree}}),Object.defineProperty(e,"mapTreeItem",{enumerable:!0,get:function(){return a.mapTreeItem}}),Object.defineProperty(e,"createDataTree",{enumerable:!0,get:function(){return r.createDataTree}}),Object.defineProperty(e,"extendDataItem",{enumerable:!0,get:function(){return r.extendDataItem}}),Object.defineProperty(e,"filterBy",{enumerable:!0,get:function(){return r.filterBy}}),Object.defineProperty(e,"flatData",{enumerable:!0,get:function(){return r.flatData}}),Object.defineProperty(e,"getItemPath",{enumerable:!0,get:function(){return r.getItemPath}}),Object.defineProperty(e,"getSelectedState",{enumerable:!0,get:function(){return r.getSelectedState}}),Object.defineProperty(e,"getSelectedStateFromKeyDown",{enumerable:!0,get:function(){return r.getSelectedStateFromKeyDown}}),Object.defineProperty(e,"modifySubItems",{enumerable:!0,get:function(){return r.modifySubItems}}),Object.defineProperty(e,"moveTreeItem",{enumerable:!0,get:function(){return r.moveTreeItem}}),Object.defineProperty(e,"orderBy",{enumerable:!0,get:function(){return r.orderBy}}),Object.defineProperty(e,"removeItems",{enumerable:!0,get:function(){return r.removeItems}}),Object.defineProperty(e,"setSelectedState",{enumerable:!0,get:function(){return r.setSelectedState}}),Object.defineProperty(e,"treeToFlat",{enumerable:!0,get:function(){return r.treeToFlat}}),e.TREELIST_COL_INDEX_ATTRIBUTE=b,e.TREELIST_PREVENT_SELECTION_ELEMENT=C,e.TREELIST_ROW_INDEX_ATTRIBUTE=v,e.TreeList=ue,e.TreeListBooleanEditor=he,e.TreeListBooleanFilter=function(e){const{operators:t,...o}=e;return p.createElement(r.BooleanFilterCell,{ariaLabel:"boolean filter",...ie(n.useLocalization(),t||se),...o})},e.TreeListCell=x,e.TreeListDateEditor=pe,e.TreeListDateFilter=function(e){const{operators:t,...o}=e;return p.createElement(r.DateFilterCell,{ariaLabel:"date filter",...ie(n.useLocalization(),t||le),...o})},e.TreeListDraggableRow=oe,e.TreeListHeaderCell=e=>p.createElement(r.HeaderCell,{...e}),e.TreeListHeaderSelectionCell=Q,e.TreeListNoRecords=U,e.TreeListNumericEditor=ce,e.TreeListNumericFilter=function(e){const{operators:t,...o}=e;return p.createElement(r.NumericFilterCell,{ariaLabel:"numeric filter",...ie(n.useLocalization(),t||ne),...o})},e.TreeListRow=W,e.TreeListSelectionCell=J,e.TreeListTextEditor=de,e.TreeListTextFilter=function(e){const{operators:t,...o}=e;return p.createElement(r.TextFilterCell,{ariaLabel:"text filter",...ie(n.useLocalization(),t||re),...o})},e.TreeListToolbar=ae,e.setHeaderRowsTop=g,e.tableRowsVirtualization=f});
|
package/index.d.mts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { TreeList } from './TreeList.js';
|
|
8
|
+
import { TreeList as TreeListClassComponent } from './TreeList.js';
|
|
9
9
|
import { TreeListProps } from './interfaces/TreeListProps';
|
|
10
10
|
import { TreeListColumnProps } from './interfaces/TreeListColumnProps';
|
|
11
11
|
import { TreeListCellProps } from './interfaces/TreeListCellProps';
|
|
@@ -37,4 +37,6 @@ import { DataItemWrapper } from './interfaces/DataItemWrapper';
|
|
|
37
37
|
import { setHeaderRowsTop, tableRowsVirtualization } from './utils/index.js';
|
|
38
38
|
import { TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT } from './constants/index.js';
|
|
39
39
|
import { TreeListSelectableMode, TreeListSelectableSettings } from './interfaces/TreeListSelectableSettings';
|
|
40
|
+
declare const TreeList: import('react').ForwardRefExoticComponent<TreeListProps & import('react').RefAttributes<TreeListClassComponent>>;
|
|
41
|
+
type TreeList = TreeListClassComponent;
|
|
40
42
|
export { TreeList, TreeListProps, TreeListColumnProps, TreeListCell, TreeListCellProps, TreeListRow, TreeListDraggableRow, TreeListRowProps, TreeListHeaderCell, TreeListHeaderCellProps, TreeListSelectionCell, TreeListSelectionCellProps, TreeListHeaderSelectionCell, TreeListHeaderSelectionCellProps, TreeListToolbar, TreeListToolbarProps, TreeListToolbarHandle, TreeListNoRecords, TreeListNoRecordsProps, TreeListSortSettings, TreeListColumnSortSettings, TreeListTextFilter, TreeListTextFilterProps, TreeListNumericFilter, TreeListNumericFilterProps, TreeListDateFilter, TreeListDateFilterProps, TreeListBooleanFilter, TreeListBooleanFilterProps, TreeListTextEditor, TreeListTextEditorProps, TreeListNumericEditor, TreeListNumericEditorProps, TreeListBooleanEditor, TreeListBooleanEditorProps, TreeListDateEditor, TreeListDateEditorProps, TreeListDataStateChangeEvent, TreeListFilterChangeEvent, TreeListColumnMenuFilterChangeEvent, TreeListSortChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListItemChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListDragSelectionReleaseEvent, TreeListKeyDownEvent, orderBy, filterBy, mapTree, createDataTree, extendDataItem, mapTreeItem, moveTreeItem, getItemPath, removeItems, modifySubItems, treeToFlat, DataItemWrapper, flatData, getNestedValue, setHeaderRowsTop, tableRowsVirtualization, TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT, getSelectedState, getSelectedStateFromKeyDown, setSelectedState, TreeListSelectableSettings, TreeListSelectableMode };
|
package/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { TreeList } from './TreeList.js';
|
|
8
|
+
import { TreeList as TreeListClassComponent } from './TreeList.js';
|
|
9
9
|
import { TreeListProps } from './interfaces/TreeListProps';
|
|
10
10
|
import { TreeListColumnProps } from './interfaces/TreeListColumnProps';
|
|
11
11
|
import { TreeListCellProps } from './interfaces/TreeListCellProps';
|
|
@@ -37,4 +37,6 @@ import { DataItemWrapper } from './interfaces/DataItemWrapper';
|
|
|
37
37
|
import { setHeaderRowsTop, tableRowsVirtualization } from './utils/index.js';
|
|
38
38
|
import { TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT } from './constants/index.js';
|
|
39
39
|
import { TreeListSelectableMode, TreeListSelectableSettings } from './interfaces/TreeListSelectableSettings';
|
|
40
|
+
declare const TreeList: import('react').ForwardRefExoticComponent<TreeListProps & import('react').RefAttributes<TreeListClassComponent>>;
|
|
41
|
+
type TreeList = TreeListClassComponent;
|
|
40
42
|
export { TreeList, TreeListProps, TreeListColumnProps, TreeListCell, TreeListCellProps, TreeListRow, TreeListDraggableRow, TreeListRowProps, TreeListHeaderCell, TreeListHeaderCellProps, TreeListSelectionCell, TreeListSelectionCellProps, TreeListHeaderSelectionCell, TreeListHeaderSelectionCellProps, TreeListToolbar, TreeListToolbarProps, TreeListToolbarHandle, TreeListNoRecords, TreeListNoRecordsProps, TreeListSortSettings, TreeListColumnSortSettings, TreeListTextFilter, TreeListTextFilterProps, TreeListNumericFilter, TreeListNumericFilterProps, TreeListDateFilter, TreeListDateFilterProps, TreeListBooleanFilter, TreeListBooleanFilterProps, TreeListTextEditor, TreeListTextEditorProps, TreeListNumericEditor, TreeListNumericEditorProps, TreeListBooleanEditor, TreeListBooleanEditorProps, TreeListDateEditor, TreeListDateEditorProps, TreeListDataStateChangeEvent, TreeListFilterChangeEvent, TreeListColumnMenuFilterChangeEvent, TreeListSortChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListItemChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListDragSelectionReleaseEvent, TreeListKeyDownEvent, orderBy, filterBy, mapTree, createDataTree, extendDataItem, mapTreeItem, moveTreeItem, getItemPath, removeItems, modifySubItems, treeToFlat, DataItemWrapper, flatData, getNestedValue, setHeaderRowsTop, tableRowsVirtualization, TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT, getSelectedState, getSelectedStateFromKeyDown, setSelectedState, TreeListSelectableSettings, TreeListSelectableMode };
|
package/index.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 o=require("./
|
|
9
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./TreeListMcpWrapper.js"),T=require("./cells/TreeListCell.js"),s=require("./header/TreeListHeaderCell.js"),l=require("./cells/TreeListSelectionCell.js"),a=require("./header/TreeListHeaderSelectionCell.js"),n=require("./rows/TreeListRow.js"),u=require("./rows/TreeListDraggableRow.js"),c=require("./TreeListToolbar.js"),L=require("./TreeListNoRecords.js"),d=require("./cells/FilterCells/TreeListTextFilter.js"),m=require("./cells/FilterCells/TreeListNumericFilter.js"),E=require("./cells/FilterCells/TreeListDateFilter.js"),b=require("./cells/FilterCells/TreeListBooleanFilter.js"),g=require("./cells/EditCells/TreeListTextEditor.js"),S=require("./cells/EditCells/TreeListNumericEditor.js"),R=require("./cells/EditCells/TreeListBooleanEditor.js"),p=require("./cells/EditCells/TreeListDateEditor.js"),t=require("@progress/kendo-react-common"),e=require("@progress/kendo-react-data-tools"),i=require("./utils/index.js"),r=require("./constants/index.js"),I=o.TreeListWrapper;exports.TreeListCell=T.TreeListCell;exports.TreeListHeaderCell=s.TreeListHeaderCell;exports.TreeListSelectionCell=l.TreeListSelectionCell;exports.TreeListHeaderSelectionCell=a.TreeListHeaderSelectionCell;exports.TreeListRow=n.TreeListRow;exports.TreeListDraggableRow=u.TreeListDraggableRow;exports.TreeListToolbar=c.TreeListToolbar;exports.TreeListNoRecords=L.TreeListNoRecords;exports.TreeListTextFilter=d.TreeListTextFilter;exports.TreeListNumericFilter=m.TreeListNumericFilter;exports.TreeListDateFilter=E.TreeListDateFilter;exports.TreeListBooleanFilter=b.TreeListBooleanFilter;exports.TreeListTextEditor=g.TreeListTextEditor;exports.TreeListNumericEditor=S.TreeListNumericEditor;exports.TreeListBooleanEditor=R.TreeListBooleanEditor;exports.TreeListDateEditor=p.TreeListDateEditor;Object.defineProperty(exports,"getNestedValue",{enumerable:!0,get:()=>t.getNestedValue});Object.defineProperty(exports,"mapTree",{enumerable:!0,get:()=>t.mapTree});Object.defineProperty(exports,"mapTreeItem",{enumerable:!0,get:()=>t.mapTreeItem});Object.defineProperty(exports,"createDataTree",{enumerable:!0,get:()=>e.createDataTree});Object.defineProperty(exports,"extendDataItem",{enumerable:!0,get:()=>e.extendDataItem});Object.defineProperty(exports,"filterBy",{enumerable:!0,get:()=>e.filterBy});Object.defineProperty(exports,"flatData",{enumerable:!0,get:()=>e.flatData});Object.defineProperty(exports,"getItemPath",{enumerable:!0,get:()=>e.getItemPath});Object.defineProperty(exports,"getSelectedState",{enumerable:!0,get:()=>e.getSelectedState});Object.defineProperty(exports,"getSelectedStateFromKeyDown",{enumerable:!0,get:()=>e.getSelectedStateFromKeyDown});Object.defineProperty(exports,"modifySubItems",{enumerable:!0,get:()=>e.modifySubItems});Object.defineProperty(exports,"moveTreeItem",{enumerable:!0,get:()=>e.moveTreeItem});Object.defineProperty(exports,"orderBy",{enumerable:!0,get:()=>e.orderBy});Object.defineProperty(exports,"removeItems",{enumerable:!0,get:()=>e.removeItems});Object.defineProperty(exports,"setSelectedState",{enumerable:!0,get:()=>e.setSelectedState});Object.defineProperty(exports,"treeToFlat",{enumerable:!0,get:()=>e.treeToFlat});exports.setHeaderRowsTop=i.setHeaderRowsTop;exports.tableRowsVirtualization=i.tableRowsVirtualization;exports.TREELIST_COL_INDEX_ATTRIBUTE=r.TREELIST_COL_INDEX_ATTRIBUTE;exports.TREELIST_PREVENT_SELECTION_ELEMENT=r.TREELIST_PREVENT_SELECTION_ELEMENT;exports.TREELIST_ROW_INDEX_ATTRIBUTE=r.TREELIST_ROW_INDEX_ATTRIBUTE;exports.TreeList=I;
|
package/index.mjs
CHANGED
|
@@ -6,64 +6,65 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import {
|
|
10
|
-
import { TreeListCell as
|
|
11
|
-
import { TreeListHeaderCell as
|
|
12
|
-
import { TreeListSelectionCell as
|
|
9
|
+
import { TreeListWrapper as e } from "./TreeListMcpWrapper.mjs";
|
|
10
|
+
import { TreeListCell as i } from "./cells/TreeListCell.mjs";
|
|
11
|
+
import { TreeListHeaderCell as a } from "./header/TreeListHeaderCell.mjs";
|
|
12
|
+
import { TreeListSelectionCell as p } from "./cells/TreeListSelectionCell.mjs";
|
|
13
13
|
import { TreeListHeaderSelectionCell as f } from "./header/TreeListHeaderSelectionCell.mjs";
|
|
14
|
-
import { TreeListRow as
|
|
15
|
-
import { TreeListDraggableRow as
|
|
16
|
-
import { TreeListToolbar as
|
|
17
|
-
import { TreeListNoRecords as
|
|
18
|
-
import { TreeListTextFilter as
|
|
19
|
-
import { TreeListNumericFilter as
|
|
20
|
-
import { TreeListDateFilter as
|
|
21
|
-
import { TreeListBooleanFilter as
|
|
22
|
-
import { TreeListTextEditor as
|
|
23
|
-
import { TreeListNumericEditor as
|
|
24
|
-
import { TreeListBooleanEditor as
|
|
25
|
-
import { TreeListDateEditor as
|
|
26
|
-
import { getNestedValue as
|
|
27
|
-
import { createDataTree as h, extendDataItem as z, filterBy as K, flatData as M, getItemPath as
|
|
28
|
-
import { setHeaderRowsTop as
|
|
29
|
-
import { TREELIST_COL_INDEX_ATTRIBUTE as
|
|
14
|
+
import { TreeListRow as L } from "./rows/TreeListRow.mjs";
|
|
15
|
+
import { TreeListDraggableRow as d } from "./rows/TreeListDraggableRow.mjs";
|
|
16
|
+
import { TreeListToolbar as S } from "./TreeListToolbar.mjs";
|
|
17
|
+
import { TreeListNoRecords as c } from "./TreeListNoRecords.mjs";
|
|
18
|
+
import { TreeListTextFilter as N } from "./cells/FilterCells/TreeListTextFilter.mjs";
|
|
19
|
+
import { TreeListNumericFilter as n } from "./cells/FilterCells/TreeListNumericFilter.mjs";
|
|
20
|
+
import { TreeListDateFilter as B } from "./cells/FilterCells/TreeListDateFilter.mjs";
|
|
21
|
+
import { TreeListBooleanFilter as F } from "./cells/FilterCells/TreeListBooleanFilter.mjs";
|
|
22
|
+
import { TreeListTextEditor as w } from "./cells/EditCells/TreeListTextEditor.mjs";
|
|
23
|
+
import { TreeListNumericEditor as y } from "./cells/EditCells/TreeListNumericEditor.mjs";
|
|
24
|
+
import { TreeListBooleanEditor as O } from "./cells/EditCells/TreeListBooleanEditor.mjs";
|
|
25
|
+
import { TreeListDateEditor as v } from "./cells/EditCells/TreeListDateEditor.mjs";
|
|
26
|
+
import { getNestedValue as P, mapTree as U, mapTreeItem as W } from "@progress/kendo-react-common";
|
|
27
|
+
import { createDataTree as h, extendDataItem as z, filterBy as K, flatData as M, getItemPath as j, getSelectedState as k, getSelectedStateFromKeyDown as q, modifySubItems as G, moveTreeItem as J, orderBy as Q, removeItems as Y, setSelectedState as Z, treeToFlat as $ } from "@progress/kendo-react-data-tools";
|
|
28
|
+
import { setHeaderRowsTop as re, tableRowsVirtualization as te } from "./utils/index.mjs";
|
|
29
|
+
import { TREELIST_COL_INDEX_ATTRIBUTE as Te, TREELIST_PREVENT_SELECTION_ELEMENT as ie, TREELIST_ROW_INDEX_ATTRIBUTE as me } from "./constants/index.mjs";
|
|
30
|
+
const t = e;
|
|
30
31
|
export {
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
Te as TREELIST_COL_INDEX_ATTRIBUTE,
|
|
33
|
+
ie as TREELIST_PREVENT_SELECTION_ELEMENT,
|
|
33
34
|
me as TREELIST_ROW_INDEX_ATTRIBUTE,
|
|
34
35
|
t as TreeList,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
O as TreeListBooleanEditor,
|
|
37
|
+
F as TreeListBooleanFilter,
|
|
38
|
+
i as TreeListCell,
|
|
39
|
+
v as TreeListDateEditor,
|
|
40
|
+
B as TreeListDateFilter,
|
|
41
|
+
d as TreeListDraggableRow,
|
|
42
|
+
a as TreeListHeaderCell,
|
|
42
43
|
f as TreeListHeaderSelectionCell,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
44
|
+
c as TreeListNoRecords,
|
|
45
|
+
y as TreeListNumericEditor,
|
|
46
|
+
n as TreeListNumericFilter,
|
|
47
|
+
L as TreeListRow,
|
|
48
|
+
p as TreeListSelectionCell,
|
|
49
|
+
w as TreeListTextEditor,
|
|
50
|
+
N as TreeListTextFilter,
|
|
51
|
+
S as TreeListToolbar,
|
|
51
52
|
h as createDataTree,
|
|
52
53
|
z as extendDataItem,
|
|
53
54
|
K as filterBy,
|
|
54
55
|
M as flatData,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
56
|
+
j as getItemPath,
|
|
57
|
+
P as getNestedValue,
|
|
58
|
+
k as getSelectedState,
|
|
59
|
+
q as getSelectedStateFromKeyDown,
|
|
60
|
+
U as mapTree,
|
|
61
|
+
W as mapTreeItem,
|
|
62
|
+
G as modifySubItems,
|
|
63
|
+
J as moveTreeItem,
|
|
64
|
+
Q as orderBy,
|
|
65
|
+
Y as removeItems,
|
|
66
|
+
re as setHeaderRowsTop,
|
|
67
|
+
Z as setSelectedState,
|
|
68
|
+
te as tableRowsVirtualization,
|
|
69
|
+
$ as treeToFlat
|
|
69
70
|
};
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import { SortDescriptor, FilterDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
|
|
9
|
+
import { WebMcpProps } from '@progress/kendo-react-common';
|
|
9
10
|
import { TreeListSortChangeEvent, TreeListFilterChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListItemChangeEvent, TreeListDataStateChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListColumnMenuFilterChangeEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListKeyDownEvent } from './events';
|
|
10
11
|
import { ScrollMode } from '../ScrollMode';
|
|
11
12
|
import { TreeListCellProps } from './TreeListCellProps';
|
|
@@ -282,4 +283,11 @@ export interface TreeListProps {
|
|
|
282
283
|
* Triggered before a header cell is rendered. Useful for customizing the header cell rendering.
|
|
283
284
|
*/
|
|
284
285
|
headerCellRender?: (defaultRendering: React.ReactNode | null, props: TreeListHeaderCellProps) => React.ReactNode;
|
|
286
|
+
/**
|
|
287
|
+
* Enables Web MCP tool registration so AI agents can interact with this TreeList.
|
|
288
|
+
* Set to `true` to use the provider-level `dataName`, or pass a config object to override.
|
|
289
|
+
*
|
|
290
|
+
* Requires a `WebMcpProvider` ancestor from `@progress/kendo-react-webmcp`.
|
|
291
|
+
*/
|
|
292
|
+
webMcp?: boolean | WebMcpProps;
|
|
285
293
|
}
|
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-treelist",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-treelist",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1779199644,version:"15.0.0-develop.1",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: '
|
|
10
|
+
publishDate: 1779199644,
|
|
11
|
+
version: '15.0.0-develop.1',
|
|
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-treelist",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.0-develop.1",
|
|
4
4
|
"description": "React TreeList enables the display of self-referencing tabular data. KendoReact TreeList package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -29,14 +29,14 @@
|
|
|
29
29
|
"@progress/kendo-date-math": "^1.4.1",
|
|
30
30
|
"@progress/kendo-drawing": "^1.21.2",
|
|
31
31
|
"@progress/kendo-licensing": "^1.7.2",
|
|
32
|
-
"@progress/kendo-react-common": "
|
|
33
|
-
"@progress/kendo-react-data-tools": "
|
|
34
|
-
"@progress/kendo-react-dateinputs": "
|
|
35
|
-
"@progress/kendo-react-dialogs": "
|
|
36
|
-
"@progress/kendo-react-dropdowns": "
|
|
37
|
-
"@progress/kendo-react-inputs": "
|
|
38
|
-
"@progress/kendo-react-intl": "
|
|
39
|
-
"@progress/kendo-svg-icons": "^4.0.0",
|
|
32
|
+
"@progress/kendo-react-common": "15.0.0-develop.1",
|
|
33
|
+
"@progress/kendo-react-data-tools": "15.0.0-develop.1",
|
|
34
|
+
"@progress/kendo-react-dateinputs": "15.0.0-develop.1",
|
|
35
|
+
"@progress/kendo-react-dialogs": "15.0.0-develop.1",
|
|
36
|
+
"@progress/kendo-react-dropdowns": "15.0.0-develop.1",
|
|
37
|
+
"@progress/kendo-react-inputs": "15.0.0-develop.1",
|
|
38
|
+
"@progress/kendo-react-intl": "15.0.0-develop.1",
|
|
39
|
+
"@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
|
|
40
40
|
"react": "^18.0.0 || ^19.0.0",
|
|
41
41
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
42
42
|
},
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"package": {
|
|
77
77
|
"productName": "KendoReact",
|
|
78
78
|
"productCode": "KENDOUIREACT",
|
|
79
|
-
"publishDate":
|
|
79
|
+
"publishDate": 1779199644,
|
|
80
80
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
81
81
|
}
|
|
82
82
|
},
|
|
@@ -86,5 +86,10 @@
|
|
|
86
86
|
},
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
|
+
},
|
|
90
|
+
"peerDependenciesMeta": {
|
|
91
|
+
"@progress/kendo-svg-icons": {
|
|
92
|
+
"optional": true
|
|
93
|
+
}
|
|
89
94
|
}
|
|
90
95
|
}
|