@progress/kendo-react-taskboard 8.2.1-develop.4 → 8.2.1-develop.5

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.
Files changed (7) hide show
  1. package/TaskBoard.js +1 -1
  2. package/TaskBoard.mjs +112 -112
  3. package/dist/cdn/js/kendo-react-taskboard.js +1 -1
  4. package/index.d.mts +8 -0
  5. package/index.d.ts +8 -0
  6. package/package-metadata.mjs +1 -1
  7. package/package.json +12 -12
package/TaskBoard.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ne=require("react"),G=require("prop-types"),ae=require("./package-metadata.js"),R=require("@progress/kendo-react-common"),J=require("./TaskBoardColumnBase.js"),se=require("./TaskBoardCardBase.js"),p=require("./constants.js"),w=require("./utils.js"),P=require("./card/Card.js"),Q=require("./column/Column.js");function oe(o){const h=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const l in o)if(l!=="default"){const x=Object.getOwnPropertyDescriptor(o,l);Object.defineProperty(h,l,x.get?x:{enumerable:!0,get:()=>o[l]})}}return h.default=o,Object.freeze(h)}const n=oe(ne),M=n.forwardRef((o,h)=>{R.validatePackage(ae.packageMetadata);const{columnData:l=[],className:x,style:V,id:W,taskData:d=[],onChange:u}=o,L=n.useRef(null),j=n.useRef(null);n.useImperativeHandle(L,()=>({props:o})),n.useImperativeHandle(h,()=>L.current);const Z=n.Children.toArray(o.children).filter(e=>e&&e.type&&e.type.displayName==="KendoReactTaskBoardToolbar"),U=n.useRef(null),g=n.useRef(null),D=n.useRef(null),[b,K]=n.useState(null),[B,N]=n.useState(null),[A,_]=n.useState({top:0,left:0}),q=n.useRef(null),X=n.useRef(null),I=n.useMemo(()=>{const e={};return(b||d).forEach(a=>{const t=a.status;e[t]||(e[t]=[]),e[t].push(a)}),e},[d,b]),$=n.useCallback(e=>{const a=e.originalEvent.target;if(a.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const t=w.closestTaskBoardElement(a),s=j.current;if(t&&s){const c=t.type===p.TASKBOARD_COLUMN;if(c&&!a.closest(".k-taskboard-column-header"))return;const S=t.element.getBoundingClientRect(),C=s.getBoundingClientRect();D.current={x:e.clientX-S.left+C.left,y:e.clientY-S.top+C.top};const m=c?l:d,O=c?N:K,f=m.findIndex(E=>String(E.id)===t.id),T=m[f];if(f===-1||T.edit)return;const i=R.clone(T);i.isPlaceholder=!0;const y=[...m];y[f]=i,g.current={...t,index:f,item:T,width:S.width,height:S.height},_({top:e.clientY-D.current.y,left:e.clientX-D.current.x}),O(y)}},[l,d]),ee=n.useCallback(e=>{const a=g.current,t=q.current&&q.current.element||X.current;if(a&&t){_({top:e.clientY-D.current.y,left:e.clientX-D.current.x}),t.style.visibility="hidden";const s=document.elementFromPoint(e.clientX,e.clientY);if(t.style.visibility="",s&&s.getAttribute(p.TASKBOARD_PLACEHOLDER))return;const c=s&&w.closestTaskBoardElement(s);if(c){let k;const S=c.type===a.type,C=a.type===p.TASKBOARD_COLUMN,m=(C?B:b)||[],O=C?N:K;if(C||S){if(k=w.findIndexes(a.id,c.id,m),k){const f=m[k.dragIndex],T=m[k.dropIndex],i=R.clone(f);C||(i.status=T.status);const y=[...m];y.splice(k.dragIndex,1),y.splice(k.dropIndex,0,i),a.index=k.dropIndex,O(y)}}else{const f=m.findIndex(i=>String(i.id)===a.id),T=l.findIndex(i=>String(i.id)===c.id);if(f!==-1&&T!==-1){const i=m[f],E=l[T].status;if(I[E])return;i.status=E;const v=[...m];v.splice(f,1),v.push(i),a.index=v.length-1,O(v)}}}}},[B,b,l,I]),te=n.useCallback(()=>{const e=g.current;if(u&&e){const t=(e.type===p.TASKBOARD_COLUMN?B:b)||[],s=t[e.index];delete s.isPlaceholder;const c={data:t,type:e.type,previousItem:e.item,item:s};u.call(void 0,c)}g.current=null,D.current=null,K(null),N(null),_({top:0,left:0})},[B,b,u]);R.useDraggable(U,{onDragStart:$,onDrag:ee,onDragEnd:te});const r=g.current,Y=n.useCallback(e=>{const t={data:[...d,e],type:p.TASKBOARD_TASK,previousItem:null,item:e};u.call(void 0,t)},[u,d]),z=n.useCallback((e,a)=>{const t=d.slice(),s=d.indexOf(a);s!==-1&&t.splice(s,1,e);const c={data:t,type:p.TASKBOARD_TASK,previousItem:a,item:e};u.call(void 0,c)},[u,d]),H=n.useCallback(e=>{const t={data:d.filter(s=>s!==e),type:p.TASKBOARD_TASK,previousItem:e,item:null};u.call(void 0,t)},[u,d]),F=n.useCallback((e,a)=>{const t=l.slice(),s=t.indexOf(a);s!==-1&&(e?t.splice(s,1,e):t.splice(s,1));const c={data:t,type:p.TASKBOARD_COLUMN,previousItem:a,item:e};u.call(void 0,c)},[u,l]);return n.createElement("div",{id:W,style:V,ref:j,className:R.classNames("k-taskboard",x)},Z,n.createElement("div",{className:"k-taskboard-content",style:r?{userSelect:"none"}:void 0},n.createElement("div",{className:"k-taskboard-columns-container",ref:U},(B||l).map(e=>n.createElement(J.TaskBoardColumnBase,{key:e.id,tabIndex:o.tabIndex,column:e,tasks:I[e.status]||[],dragTargetRef:g,onTaskCreate:Y,onTaskEdit:z,onTaskDelete:H,onColumnChange:F,columnComponent:o.column||Q.TaskBoardColumn,cardComponent:o.card||P.TaskBoardCard,priorities:o.priorities})))),r&&r.type===p.TASKBOARD_TASK&&n.createElement(se.TaskBoardCardBase,{elementRef:q,style:{position:"absolute",width:r.width,height:r.height,top:A.top,left:A.left,zIndex:10,borderLeftColor:r.item.priority?r.item.priority.color:r.item.color},task:r.item,dragTargetRef:g,cardComponent:o.card||P.TaskBoardCard,onDeleteTask:R.noop,showEditPane:R.noop}),r&&r.type===p.TASKBOARD_COLUMN&&n.createElement(J.TaskBoardColumnBase,{elementRef:X,style:{position:"absolute",width:r.width,height:r.height,top:A.top,left:A.left,zIndex:10},cardComponent:o.card||P.TaskBoardCard,columnComponent:o.column||Q.TaskBoardColumn,column:r.item,tasks:I[r.item.status],priorities:o.priorities,dragTargetRef:g,onTaskDelete:H,onColumnChange:F,onTaskEdit:z,onTaskCreate:Y}))});M.propTypes={columnData:G.array.isRequired,taskData:G.array.isRequired};M.displayName="KendoReactTaskBoard";exports.TaskBoard=M;
8
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const se=require("react"),J=require("prop-types"),oe=require("./package-metadata.js"),R=require("@progress/kendo-react-common"),Q=require("./TaskBoardColumnBase.js"),re=require("./TaskBoardCardBase.js"),p=require("./constants.js"),q=require("./utils.js"),w=require("./card/Card.js"),V=require("./column/Column.js");function ce(o){const h=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const i in o)if(i!=="default"){const x=Object.getOwnPropertyDescriptor(o,i);Object.defineProperty(h,i,x.get?x:{enumerable:!0,get:()=>o[i]})}}return h.default=o,Object.freeze(h)}const t=ce(se),M=t.forwardRef((o,h)=>{R.validatePackage(oe.packageMetadata);const{columnData:i=[],className:x,style:W,id:Z,taskData:d=[],onChange:u}=o,L=t.useRef(null),j=t.useRef(null);t.useImperativeHandle(L,()=>({props:o})),t.useImperativeHandle(h,()=>L.current);const $=t.Children.toArray(o.children).filter(e=>e&&e.type&&e.type.displayName==="KendoReactTaskBoardToolbar"),U=t.useRef(null),g=t.useRef(null),D=t.useRef(null),[S,K]=t.useState(null),[B,N]=t.useState(null),[I,P]=t.useState({top:0,left:0}),[ee,X]=t.useState(),_=t.useRef(null),Y=t.useRef(null),A=t.useMemo(()=>{const e={};return(S||d).forEach(a=>{const n=a.status;e[n]||(e[n]=[]),e[n].push(a)}),e},[d,S]),te=t.useCallback(e=>{const a=e.originalEvent.target;if(a.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const n=q.closestTaskBoardElement(a),s=j.current;if(n&&s){const c=n.type===p.TASKBOARD_COLUMN;if(c&&!a.closest(".k-taskboard-column-header"))return;const b=n.element.getBoundingClientRect(),C=s.getBoundingClientRect();D.current={x:e.clientX-b.left+C.left,y:e.clientY-b.top+C.top};const m=c?i:d,O=c?N:K,f=m.findIndex(v=>String(v.id)===n.id),T=m[f];if(f===-1||T.edit)return;const l=R.clone(T);l.isPlaceholder=!0;const y=[...m];y[f]=l,g.current={...n,index:f,item:T,width:b.width,height:b.height},X(f),P({top:e.clientY-D.current.y,left:e.clientX-D.current.x}),O(y)}},[i,d]),ne=t.useCallback(e=>{const a=g.current,n=_.current&&_.current.element||Y.current;if(a&&n){P({top:e.clientY-D.current.y,left:e.clientX-D.current.x}),n.style.visibility="hidden";const s=document.elementFromPoint(e.clientX,e.clientY);if(n.style.visibility="",s&&s.getAttribute(p.TASKBOARD_PLACEHOLDER))return;const c=s&&q.closestTaskBoardElement(s);if(c){let k;const b=c.type===a.type,C=a.type===p.TASKBOARD_COLUMN,m=(C?B:S)||[],O=C?N:K;if(C||b){if(k=q.findIndexes(a.id,c.id,m),k){const f=m[k.dragIndex],T=m[k.dropIndex],l=R.clone(f);C||(l.status=T.status);const y=[...m];y.splice(k.dragIndex,1),y.splice(k.dropIndex,0,l),a.index=k.dropIndex,O(y)}}else{const f=m.findIndex(l=>String(l.id)===a.id),T=i.findIndex(l=>String(l.id)===c.id);if(f!==-1&&T!==-1){const l=m[f],v=i[T].status;if(A[v])return;l.status=v;const E=[...m];E.splice(f,1),E.push(l),a.index=E.length-1,O(E)}}}}},[B,S,i,A]),ae=t.useCallback(()=>{const e=g.current;if(u&&e){const n=(e.type===p.TASKBOARD_COLUMN?B:S)||[],s=n[e.index];delete s.isPlaceholder;const c={data:n,type:e.type,previousItem:{...e.item,index:ee},item:{...s,index:e.index}};u.call(void 0,c)}g.current=null,D.current=null,K(null),N(null),P({top:0,left:0}),X(void 0)},[B,S,u]);R.useDraggable(U,{onDragStart:te,onDrag:ne,onDragEnd:ae});const r=g.current,z=t.useCallback(e=>{const n={data:[...d,e],type:p.TASKBOARD_TASK,previousItem:null,item:e};u.call(void 0,n)},[u,d]),H=t.useCallback((e,a)=>{const n=d.slice(),s=d.indexOf(a);s!==-1&&n.splice(s,1,e);const c={data:n,type:p.TASKBOARD_TASK,previousItem:a,item:e};u.call(void 0,c)},[u,d]),F=t.useCallback(e=>{const n={data:d.filter(s=>s!==e),type:p.TASKBOARD_TASK,previousItem:e,item:null};u.call(void 0,n)},[u,d]),G=t.useCallback((e,a)=>{const n=i.slice(),s=n.indexOf(a);s!==-1&&(e?n.splice(s,1,e):n.splice(s,1));const c={data:n,type:p.TASKBOARD_COLUMN,previousItem:a,item:e};u.call(void 0,c)},[u,i]);return t.createElement("div",{id:Z,style:W,ref:j,className:R.classNames("k-taskboard",x)},$,t.createElement("div",{className:"k-taskboard-content",style:r?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:U},(B||i).map(e=>t.createElement(Q.TaskBoardColumnBase,{key:e.id,tabIndex:o.tabIndex,column:e,tasks:A[e.status]||[],dragTargetRef:g,onTaskCreate:z,onTaskEdit:H,onTaskDelete:F,onColumnChange:G,columnComponent:o.column||V.TaskBoardColumn,cardComponent:o.card||w.TaskBoardCard,priorities:o.priorities})))),r&&r.type===p.TASKBOARD_TASK&&t.createElement(re.TaskBoardCardBase,{elementRef:_,style:{position:"absolute",width:r.width,height:r.height,top:I.top,left:I.left,zIndex:10,borderLeftColor:r.item.priority?r.item.priority.color:r.item.color},task:r.item,dragTargetRef:g,cardComponent:o.card||w.TaskBoardCard,onDeleteTask:R.noop,showEditPane:R.noop}),r&&r.type===p.TASKBOARD_COLUMN&&t.createElement(Q.TaskBoardColumnBase,{elementRef:Y,style:{position:"absolute",width:r.width,height:r.height,top:I.top,left:I.left,zIndex:10},cardComponent:o.card||w.TaskBoardCard,columnComponent:o.column||V.TaskBoardColumn,column:r.item,tasks:A[r.item.status],priorities:o.priorities,dragTargetRef:g,onTaskDelete:F,onColumnChange:G,onTaskEdit:H,onTaskCreate:z}))});M.propTypes={columnData:J.array.isRequired,taskData:J.array.isRequired};M.displayName="KendoReactTaskBoard";exports.TaskBoard=M;
package/TaskBoard.mjs CHANGED
@@ -6,78 +6,78 @@
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
8
  "use client";
9
- import * as n from "react";
10
- import z from "prop-types";
11
- import { packageMetadata as st } from "./package-metadata.mjs";
12
- import { validatePackage as ot, clone as F, useDraggable as rt, classNames as it, noop as U } from "@progress/kendo-react-common";
13
- import { TaskBoardColumnBase as j } from "./TaskBoardColumnBase.mjs";
14
- import { TaskBoardCardBase as ct } from "./TaskBoardCardBase.mjs";
15
- import { TASKBOARD_COLUMN as T, TASKBOARD_PLACEHOLDER as lt, TASKBOARD_TASK as B } from "./constants.mjs";
16
- import { closestTaskBoardElement as G, findIndexes as dt } from "./utils.mjs";
9
+ import * as e from "react";
10
+ import F from "prop-types";
11
+ import { packageMetadata as rt } from "./package-metadata.mjs";
12
+ import { validatePackage as it, clone as U, useDraggable as ct, classNames as lt, noop as j } from "@progress/kendo-react-common";
13
+ import { TaskBoardColumnBase as G } from "./TaskBoardColumnBase.mjs";
14
+ import { TaskBoardCardBase as dt } from "./TaskBoardCardBase.mjs";
15
+ import { TASKBOARD_COLUMN as I, TASKBOARD_PLACEHOLDER as ut, TASKBOARD_TASK as B } from "./constants.mjs";
16
+ import { closestTaskBoardElement as J, findIndexes as mt } from "./utils.mjs";
17
17
  import { TaskBoardCard as O } from "./card/Card.mjs";
18
- import { TaskBoardColumn as J } from "./column/Column.mjs";
19
- const Q = n.forwardRef((c, V) => {
20
- ot(st);
21
- const { columnData: f = [], className: W, style: Z, id: $, taskData: l = [], onChange: d } = c, K = n.useRef(null), L = n.useRef(null);
22
- n.useImperativeHandle(K, () => ({ props: c })), n.useImperativeHandle(V, () => K.current);
23
- const tt = n.Children.toArray(c.children).filter((t) => t && t.type && t.type.displayName === "KendoReactTaskBoardToolbar"), M = n.useRef(null), p = n.useRef(null), C = n.useRef(null), [R, w] = n.useState(null), [x, A] = n.useState(null), [b, P] = n.useState({ top: 0, left: 0 }), N = n.useRef(null), X = n.useRef(null), I = n.useMemo(() => {
18
+ import { TaskBoardColumn as Q } from "./column/Column.mjs";
19
+ const V = e.forwardRef((c, W) => {
20
+ it(rt);
21
+ const { columnData: f = [], className: Z, style: $, id: tt, taskData: l = [], onChange: d } = c, K = e.useRef(null), L = e.useRef(null);
22
+ e.useImperativeHandle(K, () => ({ props: c })), e.useImperativeHandle(W, () => K.current);
23
+ const et = e.Children.toArray(c.children).filter((t) => t && t.type && t.type.displayName === "KendoReactTaskBoardToolbar"), M = e.useRef(null), p = e.useRef(null), x = e.useRef(null), [C, w] = e.useState(null), [D, A] = e.useState(null), [T, P] = e.useState({ top: 0, left: 0 }), [nt, X] = e.useState(), N = e.useRef(null), Y = e.useRef(null), b = e.useMemo(() => {
24
24
  const t = {};
25
- return (R || l).forEach((a) => {
26
- const e = a.status;
27
- t[e] || (t[e] = []), t[e].push(a);
25
+ return (C || l).forEach((a) => {
26
+ const n = a.status;
27
+ t[n] || (t[n] = []), t[n].push(a);
28
28
  }), t;
29
- }, [l, R]), et = n.useCallback(
29
+ }, [l, C]), at = e.useCallback(
30
30
  (t) => {
31
31
  const a = t.originalEvent.target;
32
32
  if (a.closest("button,input,.k-link,.k-taskboard-preview-pane"))
33
33
  return;
34
- const e = G(a), s = L.current;
35
- if (e && s) {
36
- const r = e.type === T;
34
+ const n = J(a), s = L.current;
35
+ if (n && s) {
36
+ const r = n.type === I;
37
37
  if (r && !a.closest(".k-taskboard-column-header"))
38
38
  return;
39
- const D = e.element.getBoundingClientRect(), y = s.getBoundingClientRect();
40
- C.current = {
41
- x: t.clientX - D.left + y.left,
42
- y: t.clientY - D.top + y.top
39
+ const R = n.element.getBoundingClientRect(), y = s.getBoundingClientRect();
40
+ x.current = {
41
+ x: t.clientX - R.left + y.left,
42
+ y: t.clientY - R.top + y.top
43
43
  };
44
- const u = r ? f : l, S = r ? A : w, m = u.findIndex((E) => String(E.id) === e.id), k = u[m];
44
+ const u = r ? f : l, S = r ? A : w, m = u.findIndex((v) => String(v.id) === n.id), k = u[m];
45
45
  if (m === -1 || k.edit)
46
46
  return;
47
- const i = F(k);
47
+ const i = U(k);
48
48
  i.isPlaceholder = !0;
49
49
  const h = [...u];
50
50
  h[m] = i, p.current = {
51
- ...e,
51
+ ...n,
52
52
  index: m,
53
53
  item: k,
54
- width: D.width,
55
- height: D.height
56
- }, P({
57
- top: t.clientY - C.current.y,
58
- left: t.clientX - C.current.x
54
+ width: R.width,
55
+ height: R.height
56
+ }, X(m), P({
57
+ top: t.clientY - x.current.y,
58
+ left: t.clientX - x.current.x
59
59
  }), S(h);
60
60
  }
61
61
  },
62
62
  [f, l]
63
- ), nt = n.useCallback(
63
+ ), st = e.useCallback(
64
64
  (t) => {
65
- const a = p.current, e = N.current && N.current.element || X.current;
66
- if (a && e) {
65
+ const a = p.current, n = N.current && N.current.element || Y.current;
66
+ if (a && n) {
67
67
  P({
68
- top: t.clientY - C.current.y,
69
- left: t.clientX - C.current.x
70
- }), e.style.visibility = "hidden";
68
+ top: t.clientY - x.current.y,
69
+ left: t.clientX - x.current.x
70
+ }), n.style.visibility = "hidden";
71
71
  const s = document.elementFromPoint(t.clientX, t.clientY);
72
- if (e.style.visibility = "", s && s.getAttribute(lt))
72
+ if (n.style.visibility = "", s && s.getAttribute(ut))
73
73
  return;
74
- const r = s && G(s);
74
+ const r = s && J(s);
75
75
  if (r) {
76
76
  let g;
77
- const D = r.type === a.type, y = a.type === T, u = (y ? x : R) || [], S = y ? A : w;
78
- if (y || D) {
79
- if (g = dt(a.id, r.id, u), g) {
80
- const m = u[g.dragIndex], k = u[g.dropIndex], i = F(m);
77
+ const R = r.type === a.type, y = a.type === I, u = (y ? D : C) || [], S = y ? A : w;
78
+ if (y || R) {
79
+ if (g = mt(a.id, r.id, u), g) {
80
+ const m = u[g.dragIndex], k = u[g.dropIndex], i = U(m);
81
81
  y || (i.status = k.status);
82
82
  const h = [...u];
83
83
  h.splice(g.dragIndex, 1), h.splice(g.dropIndex, 0, i), a.index = g.dropIndex, S(h);
@@ -85,155 +85,155 @@ const Q = n.forwardRef((c, V) => {
85
85
  } else {
86
86
  const m = u.findIndex((i) => String(i.id) === a.id), k = f.findIndex((i) => String(i.id) === r.id);
87
87
  if (m !== -1 && k !== -1) {
88
- const i = u[m], E = f[k].status;
89
- if (I[E])
88
+ const i = u[m], v = f[k].status;
89
+ if (b[v])
90
90
  return;
91
- i.status = E;
92
- const v = [...u];
93
- v.splice(m, 1), v.push(i), a.index = v.length - 1, S(v);
91
+ i.status = v;
92
+ const E = [...u];
93
+ E.splice(m, 1), E.push(i), a.index = E.length - 1, S(E);
94
94
  }
95
95
  }
96
96
  }
97
97
  }
98
98
  },
99
- [x, R, f, I]
100
- ), at = n.useCallback(
99
+ [D, C, f, b]
100
+ ), ot = e.useCallback(
101
101
  () => {
102
102
  const t = p.current;
103
103
  if (d && t) {
104
- const e = (t.type === T ? x : R) || [], s = e[t.index];
104
+ const n = (t.type === I ? D : C) || [], s = n[t.index];
105
105
  delete s.isPlaceholder;
106
106
  const r = {
107
- data: e,
107
+ data: n,
108
108
  type: t.type,
109
- previousItem: t.item,
110
- item: s
109
+ previousItem: { ...t.item, index: nt },
110
+ item: { ...s, index: t.index }
111
111
  };
112
112
  d.call(void 0, r);
113
113
  }
114
- p.current = null, C.current = null, w(null), A(null), P({ top: 0, left: 0 });
114
+ p.current = null, x.current = null, w(null), A(null), P({ top: 0, left: 0 }), X(void 0);
115
115
  },
116
- [x, R, d]
116
+ [D, C, d]
117
117
  );
118
- rt(M, {
119
- onDragStart: et,
120
- onDrag: nt,
121
- onDragEnd: at
118
+ ct(M, {
119
+ onDragStart: at,
120
+ onDrag: st,
121
+ onDragEnd: ot
122
122
  });
123
- const o = p.current, Y = n.useCallback((t) => {
124
- const e = {
123
+ const o = p.current, H = e.useCallback((t) => {
124
+ const n = {
125
125
  data: [...l, t],
126
126
  type: B,
127
127
  previousItem: null,
128
128
  item: t
129
129
  };
130
- d.call(void 0, e);
131
- }, [d, l]), H = n.useCallback((t, a) => {
132
- const e = l.slice(), s = l.indexOf(a);
133
- s !== -1 && e.splice(s, 1, t);
130
+ d.call(void 0, n);
131
+ }, [d, l]), _ = e.useCallback((t, a) => {
132
+ const n = l.slice(), s = l.indexOf(a);
133
+ s !== -1 && n.splice(s, 1, t);
134
134
  const r = {
135
- data: e,
135
+ data: n,
136
136
  type: B,
137
137
  previousItem: a,
138
138
  item: t
139
139
  };
140
140
  d.call(void 0, r);
141
- }, [d, l]), _ = n.useCallback((t) => {
142
- const e = {
141
+ }, [d, l]), q = e.useCallback((t) => {
142
+ const n = {
143
143
  data: l.filter((s) => s !== t),
144
144
  type: B,
145
145
  previousItem: t,
146
146
  item: null
147
147
  };
148
- d.call(void 0, e);
149
- }, [d, l]), q = n.useCallback((t, a) => {
150
- const e = f.slice(), s = e.indexOf(a);
151
- s !== -1 && (t ? e.splice(s, 1, t) : e.splice(s, 1));
148
+ d.call(void 0, n);
149
+ }, [d, l]), z = e.useCallback((t, a) => {
150
+ const n = f.slice(), s = n.indexOf(a);
151
+ s !== -1 && (t ? n.splice(s, 1, t) : n.splice(s, 1));
152
152
  const r = {
153
- data: e,
154
- type: T,
153
+ data: n,
154
+ type: I,
155
155
  previousItem: a,
156
156
  item: t
157
157
  };
158
158
  d.call(void 0, r);
159
159
  }, [d, f]);
160
- return /* @__PURE__ */ n.createElement(
160
+ return /* @__PURE__ */ e.createElement(
161
161
  "div",
162
162
  {
163
- id: $,
164
- style: Z,
163
+ id: tt,
164
+ style: $,
165
165
  ref: L,
166
- className: it("k-taskboard", W)
166
+ className: lt("k-taskboard", Z)
167
167
  },
168
- tt,
169
- /* @__PURE__ */ n.createElement("div", { className: "k-taskboard-content", style: o ? { userSelect: "none" } : void 0 }, /* @__PURE__ */ n.createElement("div", { className: "k-taskboard-columns-container", ref: M }, (x || f).map((t) => /* @__PURE__ */ n.createElement(
170
- j,
168
+ et,
169
+ /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-content", style: o ? { userSelect: "none" } : void 0 }, /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-columns-container", ref: M }, (D || f).map((t) => /* @__PURE__ */ e.createElement(
170
+ G,
171
171
  {
172
172
  key: t.id,
173
173
  tabIndex: c.tabIndex,
174
174
  column: t,
175
- tasks: I[t.status] || [],
175
+ tasks: b[t.status] || [],
176
176
  dragTargetRef: p,
177
- onTaskCreate: Y,
178
- onTaskEdit: H,
179
- onTaskDelete: _,
180
- onColumnChange: q,
181
- columnComponent: c.column || J,
177
+ onTaskCreate: H,
178
+ onTaskEdit: _,
179
+ onTaskDelete: q,
180
+ onColumnChange: z,
181
+ columnComponent: c.column || Q,
182
182
  cardComponent: c.card || O,
183
183
  priorities: c.priorities
184
184
  }
185
185
  )))),
186
- o && o.type === B && /* @__PURE__ */ n.createElement(
187
- ct,
186
+ o && o.type === B && /* @__PURE__ */ e.createElement(
187
+ dt,
188
188
  {
189
189
  elementRef: N,
190
190
  style: {
191
191
  position: "absolute",
192
192
  width: o.width,
193
193
  height: o.height,
194
- top: b.top,
195
- left: b.left,
194
+ top: T.top,
195
+ left: T.left,
196
196
  zIndex: 10,
197
197
  borderLeftColor: o.item.priority ? o.item.priority.color : o.item.color
198
198
  },
199
199
  task: o.item,
200
200
  dragTargetRef: p,
201
201
  cardComponent: c.card || O,
202
- onDeleteTask: U,
203
- showEditPane: U
202
+ onDeleteTask: j,
203
+ showEditPane: j
204
204
  }
205
205
  ),
206
- o && o.type === T && /* @__PURE__ */ n.createElement(
207
- j,
206
+ o && o.type === I && /* @__PURE__ */ e.createElement(
207
+ G,
208
208
  {
209
- elementRef: X,
209
+ elementRef: Y,
210
210
  style: {
211
211
  position: "absolute",
212
212
  width: o.width,
213
213
  height: o.height,
214
- top: b.top,
215
- left: b.left,
214
+ top: T.top,
215
+ left: T.left,
216
216
  zIndex: 10
217
217
  },
218
218
  cardComponent: c.card || O,
219
- columnComponent: c.column || J,
219
+ columnComponent: c.column || Q,
220
220
  column: o.item,
221
- tasks: I[o.item.status],
221
+ tasks: b[o.item.status],
222
222
  priorities: c.priorities,
223
223
  dragTargetRef: p,
224
- onTaskDelete: _,
225
- onColumnChange: q,
226
- onTaskEdit: H,
227
- onTaskCreate: Y
224
+ onTaskDelete: q,
225
+ onColumnChange: z,
226
+ onTaskEdit: _,
227
+ onTaskCreate: H
228
228
  }
229
229
  )
230
230
  );
231
231
  });
232
- Q.propTypes = {
233
- columnData: z.array.isRequired,
234
- taskData: z.array.isRequired
232
+ V.propTypes = {
233
+ columnData: F.array.isRequired,
234
+ taskData: F.array.isRequired
235
235
  };
236
- Q.displayName = "KendoReactTaskBoard";
236
+ V.displayName = "KendoReactTaskBoard";
237
237
  export {
238
- Q as TaskBoard
238
+ V as TaskBoard
239
239
  };
package/dist/cdn/js/kendo-react-taskboard.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
- !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-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-react-inputs"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-dialogs"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-popup"),require("@progress/kendo-react-dropdowns"),require("@progress/kendo-react-labels"),require("@progress/kendo-react-form")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-react-inputs","@progress/kendo-svg-icons","@progress/kendo-react-dialogs","@progress/kendo-react-layout","@progress/kendo-react-popup","@progress/kendo-react-dropdowns","@progress/kendo-react-labels","@progress/kendo-react-form"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTaskboard={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl,e.KendoReactButtons,e.KendoReactInputs,e.KendoSvgIcons,e.KendoReactDialogs,e.KendoReactLayout,e.KendoReactPopup,e.KendoReactDropdowns,e.KendoReactLabels,e.KendoReactForm)}(this,(function(e,t,a,o,n,r,i,l,s,d,c,u,m,p){"use strict";function g(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 k=g(t);const C={name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},f="taskBoard.editColumnButton",h="taskBoard.addCardButton",y="taskBoard.deleteColumnButton",b="taskBoard.editCardButton",E="taskBoard.deleteCardButton",B="taskBoard.deleteTaskDialogMessage",T="taskBoard.deleteTaskDialogTitle",v="taskBoard.deleteTaskConfirmButton",D="taskBoard.deleteTaskCancelButton",S="taskBoard.addCardTitle",w="taskBoard.addCardTitleLabel",I="taskBoard.addCardDescriptionLabel",R="taskBoard.addCardPriorityLabel",L="taskBoard.addCardCreateButton",P="taskBoard.deleteColumnDialogMessage",N="taskBoard.deleteColumnDialogTitle",x="taskBoard.deleteColumnConfirmButton",M="taskBoard.deleteColumnCancelButton",K="taskBoard.editCardPaneTitle",q="taskBoard.editCardPaneSaveButton",A="taskBoard.editPaneTitleLabel",H="taskBoard.editPaneDescriptionLabel",F="taskBoard.editPanePriorityLabel",j="taskBoard.editPaneCancelButton",O="taskBoard.previewPanePriorityLabel",z="taskBoard.previewPaneDeleteButton",X="taskBoard.previewPaneEditButton",Y={"taskBoard.toolbarAddColumnButton":"Add column","taskBoard.toolbarSearchField":"Search",[f]:"Edit column",[h]:"Add card",[y]:"Delete column",[b]:"Edit card",[E]:"Delete card",[B]:"Are you sure you want to delete this card?",[T]:"Delete Card",[v]:"Delete",[D]:"Cancel",[P]:"Are you sure you want to delete this column?",[N]:"Delete column?",[x]:"Delete",[M]:"Cancel",[S]:"Create new card",[L]:"Create",[j]:"Cancel",[K]:"Edit",[q]:"Save changes",[A]:"Title:",[H]:"Description:",[F]:"Priority:",[w]:"Title",[I]:"Description",[R]:"Priority",[O]:"Priority:",[z]:"Delete",[X]:"Edit"},U="data-taskboard-type",W="data-taskboard-id",V="data-taskboard-placeholder",G="column",J="task",Q=e=>{const{edit:t,title:a}=e.column;return k.createElement("div",{className:"k-taskboard-column-header"},k.createElement("div",{className:"k-taskboard-column-header-text k-text-ellipsis"},t?k.createElement(i.Input,{value:a,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):a),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:o.classNames("k-taskboard-column-header-actions",{"k-disabled":t})},k.createElement(r.Button,{fillMode:"flat",icon:"pencil",svgIcon:l.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),k.createElement(r.Button,{fillMode:"flat",icon:"plus",svgIcon:l.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),k.createElement(r.Button,{fillMode:"flat",icon:"x",svgIcon:l.xIcon,title:e.closeButtonTitle,onClick:e.onColumnDelete})))};Q.displayName="KendoReactTaskBoardColumnHeader";const Z=e=>k.createElement("div",{className:"k-taskboard-column-cards-container"},k.createElement("div",{className:"k-taskboard-column-cards"},e.children));Z.displayName="KendoReactTaskBoardColumnBody";const $=e=>{const{onClose:t,onConfirm:a,dialogMessage:o,dialogTitle:n,dialogConfirmButton:i,dialogCancelButton:l}=e;return k.createElement(s.Dialog,{title:n,closeIcon:!1},o,k.createElement(s.DialogActionsBar,{layout:"end"},k.createElement(r.Button,{themeColor:"primary",onClick:a},i),k.createElement(r.Button,{onClick:t},l)))};$.propTypes={onClose:a.func.isRequired,onConfirm:a.func.isRequired,dialogMessage:a.string.isRequired,dialogTitle:a.string.isRequired,dialogConfirmButton:a.string.isRequired,dialogCancelButton:a.string.isRequired},$.displayName="KendoReactTaskBoardConfirmDialog";const _=({onSave:e,task:t,priorities:a})=>{const[o,n]=k.useState(t?t.title:""),[r,i]=k.useState(t?t.description:""),[l,s]=k.useState(t?t.priority:a[0]),d=k.useCallback((e=>{n(e.value)}),[]),c=k.useCallback((e=>{i(e.value)}),[]),u=k.useCallback((e=>{s(e.target.value)}),[]),m=k.useCallback((a=>{const n={id:void 0,status:"",...t||{},title:o,description:r,priority:l};e.call(void 0,n,t)}),[e,t,o,r,l]);return{onTitleChange:d,title:o,onDescriptionChange:c,description:r,onPriorityChange:u,priority:l,onSave:m}},ee=e=>{const{onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l,onSave:s}=_(e),d=n.useLocalization();return k.createElement(e.editPane,{header:d.toLanguageString(K,Y[K])+e.task.title,titleInputTitle:d.toLanguageString(w,Y[w]),descriptionInputTitle:d.toLanguageString(I,Y[I]),priorityDropDownTitle:d.toLanguageString(R,Y[R]),task:e.task,saveButton:d.toLanguageString(q,Y[q]),cancelButton:d.toLanguageString(j,Y[j]),priorities:e.priorities,titleLabel:d.toLanguageString(A,Y[A]),descriptionLabel:d.toLanguageString(H,Y[H]),priorityLabel:d.toLanguageString(F,Y[F]),onSave:s,onClose:e.onClose,onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l})};ee.propTypes={},ee.displayName="KendoReactTaskBoardEditCard";const te=e=>{const{onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l,onSave:s}=_(e),d=n.useLocalization();return k.createElement(e.editPane,{header:d.toLanguageString(S,Y[S]),titleInputTitle:d.toLanguageString(w,Y[w]),descriptionInputTitle:d.toLanguageString(I,Y[I]),priorityDropDownTitle:d.toLanguageString(R,Y[R]),titleLabel:d.toLanguageString(A,Y[A]),descriptionLabel:d.toLanguageString(H,Y[H]),priorityLabel:d.toLanguageString(F,Y[F]),saveButton:d.toLanguageString(L,Y[L]),cancelButton:d.toLanguageString(j,Y[j]),priorities:e.priorities,onSave:s,onClose:e.onClose,onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l})};te.propTypes={},te.displayName="KendoReactTaskBoardAddCard";const ae=e=>{const t=k.useRef();return k.createElement(d.CardHeader,{className:"k-hbox"},k.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-card-header-actions"},k.createElement(r.Button,{className:"k-card-details",fillMode:"flat",themeColor:"base",icon:"more-vertical",svgIcon:l.moreVerticalIcon,ref:t,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),k.createElement(c.Popup,{anchor:t.current&&t.current.element,show:e.showMenu,ref:e.popupRef},k.createElement(d.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};ae.displayName="KendoReactTaskBoardCardHeader";const oe=e=>k.createElement(d.CardBody,null,e.children);oe.displayName="KendoReactTaskBoardCardBody";const ne=e=>k.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},k.createElement("div",{className:"k-taskboard-pane-header"},k.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-taskboard-pane-header-actions"},k.createElement(r.Button,{icon:"x",svgIcon:l.xIcon,fillMode:"flat",onClick:e.onClosePreviewPane}))),k.createElement("div",{className:"k-taskboard-pane-content"},k.createElement("p",null,e.description),k.createElement("p",null,e.priorityLabel," ",k.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),k.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},k.createElement(r.Button,{onClick:e.onTaskDelete},e.delete),k.createElement(r.Button,{themeColor:"primary",onClick:e.onTaskEdit},e.edit)));ne.displayName="KendoReactTaskBoardPreviewDialog";const re=e=>{const{onDeleteTask:t,showEditPane:a,task:o,style:r,dragTargetRef:i,elementRef:s}=e,[c,u]=k.useState(!1),[m,p]=k.useState(!1),[g,C]=k.useState(!1),f=k.useRef(null),h=n.useLocalization(),y=[{text:h.toLanguageString(b,Y[b]),icon:"pencil",svgIcon:l.pencilIcon,data:()=>{a(o),u(!c)}},{text:h.toLanguageString(E,Y[E]),icon:"trash",svgIcon:l.trashIcon,data:()=>{p(!m),u(!c)}}],S=()=>{C(!0)};return o.isPlaceholder&&i&&i.current?k.createElement("div",{style:{width:i.current.width,height:i.current.height},className:"k-taskboard-drag-placeholder",[V]:!0}):k.createElement(e.cardComponent,{task:o,style:r,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:s,showMenu:c,showDeleteConfirm:m,showTaskPreviewPane:g,menuItems:y,popupRef:f,confirmDialogMessage:h.toLanguageString(B,Y[B]),confirmDialogTitle:h.toLanguageString(T,Y[T]),confirmDialogConfirmButton:h.toLanguageString(v,Y[v]),confirmDialogCancelButton:h.toLanguageString(D,Y[D]),previewDialogPriorityLabel:h.toLanguageString(O,Y[O]),previewDialogDelete:h.toLanguageString(z,Y[z]),previewDialogEdit:h.toLanguageString(X,Y[X]),onShowPreviewPane:S,onClosePreviewPane:()=>{C(!1)},onMenuItemSelect:e=>{e.item.data()},onShowMenu:()=>{u(!0)},onHideMenu:()=>{u(!1)},onMenuButtonBlur:e=>{const t=f.current&&f.current.element;t&&t.contains(e.relatedTarget)||u(!1)},onTaskDelete:t,onTaskEdit:()=>{a(o),S()},onCloseConfirmDialog:()=>{p(!m)},card:d.Card,cardHeader:ae,cardBody:oe,confirmDialog:$,previewDialog:ne})};re.propTypes={task:a.object.isRequired},re.displayName="KendoReactTaskBoardCardBase";const ie=e=>{const[t,a]=k.useState(!1),[o,r]=k.useState(!1),[i,l]=k.useState(!1),[s,d]=k.useState(),{dragTargetRef:c,column:u,onColumnChange:m,tasks:p,elementRef:g,style:C,onTaskCreate:b,onTaskEdit:E,onTaskDelete:B}=e,T=n.useLocalization(),v=k.useCallback((e=>{const t={...u,title:e.value};m.call(void 0,t,u)}),[u,m]),D=k.useCallback((()=>{const e={...u,edit:!0};m.call(void 0,e,u)}),[u,m]),S=k.useCallback((()=>{const e={...u,edit:!1};m.call(void 0,e,u)}),[u,m]),w=k.useCallback((()=>{m.call(void 0,null,u)}),[u,m]),I=e=>{r(!0),d(e)},R=k.useCallback((e=>{a(!1),b.call(void 0,{...e,status:u.status})}),[b,u]),L=k.useCallback(((e,t)=>{r(!1),E.call(void 0,e,t)}),[E]),K=k.useCallback((e=>{B.call(void 0,e)}),[B]);if(u.isPlaceholder&&c&&c.current){const e=c.current?c.current.width:0,t=c.current?c.current.height:0;return k.createElement("div",{style:{width:e,height:t},className:"k-taskboard-column k-taskboard-drag-placeholder",[V]:!0})}return k.createElement(e.columnComponent,{column:e.column,tasks:p,priorities:e.priorities,style:c?{overflow:"visible",...C}:C,tabIndex:e.tabIndex,elementRef:g,onTaskCreate:R,onTaskEdit:L,onTaskDelete:K,card:e.cardComponent,header:Q,body:Z,confirmDialog:$,editCardDialog:ee,addCardDialog:te,onTitleChange:v,onColumnEnterEdit:D,onColumnExitEdit:S,onColumnConfirmDelete:w,onShowAddCardDialog:()=>{a(!0)},onShowEditCardPane:I,onColumnDelete:()=>{l(!i)},onCloseDialog:()=>{a(!1),r(!1)},showAddCard:t,showEditCard:o,showColumnConfirmDelete:i,editedTask:s,confirmDialogMessage:T.toLanguageString(P,Y[P]),confirmDialogTitle:T.toLanguageString(N,Y[N]),confirmDialogConfirmButton:T.toLanguageString(x,Y[x]),confirmDialogCancelButton:T.toLanguageString(M,Y[M]),editButtonTitle:T.toLanguageString(f,Y[f]),addButtonTitle:T.toLanguageString(h,Y[h]),closeButtonTitle:T.toLanguageString(y,Y[y])},p&&p.map((t=>k.createElement(re,{key:t.id,tabIndex:e.tabIndex,task:t,disabled:!!e.column.edit,onDeleteTask:()=>K(t),showEditPane:()=>I(t),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:t.priority.color},cardComponent:e.cardComponent}))))};ie.propTypes={column:a.object.isRequired,taskMap:a.object},ie.displayName="KendoReactTaskBoardColumn";const le=e=>{for(;e;){if(!e.getAttribute)return null;const t=e.getAttribute(W);if(t)return{id:t,type:e.getAttribute(U)||"",element:e};e=e.parentNode}return null},se=(e,t)=>{const a=t.dataItem.color,o=k.createElement(k.Fragment,null,k.createElement("span",{style:{backgroundColor:a}}," "),e.props.children);return k.cloneElement(e,e.props,o)},de=(e,t)=>{if(!t)return e;const a=k.createElement(k.Fragment,null,k.createElement("span",{style:{backgroundColor:t.color}}," "),k.createElement("span",null,"  ",e.props.children));return k.cloneElement(e,{...e.props},a)},ce=e=>k.createElement(k.Fragment,null,k.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:o.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[U]:J,[W]:e.task.id,tabIndex:e.tabIndex},k.createElement(e.cardHeader,{showMenu:e.showMenu,menuItems:e.menuItems,popupRef:e.popupRef,title:e.task.title,task:e.task,onShowPreviewPane:e.onShowPreviewPane,onShowMenu:e.onShowMenu,onHideMenu:e.onHideMenu,onMenuButtonBlur:e.onMenuButtonBlur,onMenuItemSelect:e.onMenuItemSelect}),k.createElement(e.cardBody,{task:e.task},e.task.description)),e.showDeleteConfirm&&k.createElement(e.confirmDialog,{onConfirm:e.onTaskDelete,onClose:e.onCloseConfirmDialog,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}),e.showTaskPreviewPane&&k.createElement(e.previewDialog,{title:e.task.title,description:e.task.description,priorityLabel:e.previewDialogPriorityLabel,delete:e.previewDialogDelete,edit:e.previewDialogEdit,onClosePreviewPane:e.onClosePreviewPane,onTaskDelete:e.onTaskDelete,onTaskEdit:e.onTaskEdit,priority:e.task.priority}));ce.displayName="KendoReactTaskBoardCard";const ue=e=>k.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},k.createElement("div",{className:"k-taskboard-pane-header"},k.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-taskboard-pane-header-actions"},k.createElement(r.Button,{icon:"x",svgIcon:l.xIcon,fillMode:"flat",onClick:e.onClose}))),k.createElement("div",{className:"k-taskboard-pane-content"},k.createElement("div",{role:"form","data-role":"form",className:"k-form"},k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"title"},e.titleLabel),k.createElement(i.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"description"},e.descriptionLabel),k.createElement(i.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"priority"},e.priorityLabel),k.createElement(u.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:se,valueRender:de,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),k.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},k.createElement(r.Button,{onClick:e.onClose},e.cancelButton),k.createElement(r.Button,{themeColor:"primary",onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));ue.propTypes={},ue.displayName="KendoReactTaskBoardEditPane";const me=e=>k.createElement(k.Fragment,null,k.createElement("div",{ref:e.elementRef,style:e.style,className:o.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[U]:G,[W]:e.column.id},k.createElement(e.header,{column:e.column,tasks:e.tasks,onTitleChange:e.onTitleChange,onColumnExitEdit:e.onColumnExitEdit,editButtonTitle:e.editButtonTitle,onColumnEnterEdit:e.onColumnEnterEdit,addButtonTitle:e.addButtonTitle,onShowAddCardDialog:e.onShowAddCardDialog,closeButtonTitle:e.closeButtonTitle,onColumnDelete:e.onColumnDelete}),k.createElement(e.body,null,e.children)),e.showAddCard&&k.createElement(e.addCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskCreate,priorities:e.priorities,editPane:ue}),e.showEditCard&&e.editedTask&&k.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:ue}),e.showColumnConfirmDelete&&k.createElement(e.confirmDialog,{onClose:e.onColumnDelete,onConfirm:e.onColumnConfirmDelete,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}));me.displayName="KendoReactTaskBoardColumn";const pe=k.forwardRef(((e,t)=>{o.validatePackage(C);const{columnData:a=[],className:n,style:r,id:i,taskData:l=[],onChange:s}=e,d=k.useRef(null),c=k.useRef(null);k.useImperativeHandle(d,(()=>({props:e}))),k.useImperativeHandle(t,(()=>d.current));const u=k.Children.toArray(e.children).filter((e=>e&&e.type&&"KendoReactTaskBoardToolbar"===e.type.displayName)),m=k.useRef(null),p=k.useRef(null),g=k.useRef(null),[f,h]=k.useState(null),[y,b]=k.useState(null),[E,B]=k.useState({top:0,left:0}),T=k.useRef(null),v=k.useRef(null),D=k.useMemo((()=>{const e={};return(f||l).forEach((t=>{const a=t.status;e[a]||(e[a]=[]),e[a].push(t)})),e}),[l,f]),S=k.useCallback((e=>{const t=e.originalEvent.target;if(t.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const n=le(t),r=c.current;if(n&&r){const i=n.type===G;if(i&&!t.closest(".k-taskboard-column-header"))return;const s=n.element.getBoundingClientRect(),d=r.getBoundingClientRect();g.current={x:e.clientX-s.left+d.left,y:e.clientY-s.top+d.top};const c=i?a:l,u=i?b:h,m=c.findIndex((e=>String(e.id)===n.id)),k=c[m];if(-1===m||k.edit)return;const C=o.clone(k);C.isPlaceholder=!0;const f=[...c];f[m]=C,p.current={...n,index:m,item:k,width:s.width,height:s.height},B({top:e.clientY-g.current.y,left:e.clientX-g.current.x}),u(f)}}),[a,l]),w=k.useCallback((e=>{const t=p.current,n=T.current&&T.current.element||v.current;if(t&&n){B({top:e.clientY-g.current.y,left:e.clientX-g.current.x}),n.style.visibility="hidden";const r=document.elementFromPoint(e.clientX,e.clientY);if(n.style.visibility="",r&&r.getAttribute(V))return;const i=r&&le(r);if(i){let e;const n=i.type===t.type,r=t.type===G,l=(r?y:f)||[],s=r?b:h;if(r||n){if(e=((e,t,a)=>{let o=-1,n=-1;for(let r=0;r<a.length;r++){const i=String(a[r].id);if(i===e&&(n=r),i===t&&(o=r),-1!==o&&-1!==n)return{dragIndex:n,dropIndex:o}}return null})(t.id,i.id,l),e){const a=l[e.dragIndex],n=l[e.dropIndex],i=o.clone(a);r||(i.status=n.status);const d=[...l];d.splice(e.dragIndex,1),d.splice(e.dropIndex,0,i),t.index=e.dropIndex,s(d)}}else{const e=l.findIndex((e=>String(e.id)===t.id)),o=a.findIndex((e=>String(e.id)===i.id));if(-1!==e&&-1!==o){const n=l[e],r=a[o].status;if(D[r])return;n.status=r;const i=[...l];i.splice(e,1),i.push(n),t.index=i.length-1,s(i)}}}}}),[y,f,a,D]),I=k.useCallback((()=>{const e=p.current;if(s&&e){const t=(e.type===G?y:f)||[],a=t[e.index];delete a.isPlaceholder;const o={data:t,type:e.type,previousItem:e.item,item:a};s.call(void 0,o)}p.current=null,g.current=null,h(null),b(null),B({top:0,left:0})}),[y,f,s]);o.useDraggable(m,{onDragStart:S,onDrag:w,onDragEnd:I});const R=p.current,L=k.useCallback((e=>{const t={data:[...l,e],type:J,previousItem:null,item:e};s.call(void 0,t)}),[s,l]),P=k.useCallback(((e,t)=>{const a=l.slice(),o=l.indexOf(t);-1!==o&&a.splice(o,1,e);const n={data:a,type:J,previousItem:t,item:e};s.call(void 0,n)}),[s,l]),N=k.useCallback((e=>{const t={data:l.filter((t=>t!==e)),type:J,previousItem:e,item:null};s.call(void 0,t)}),[s,l]),x=k.useCallback(((e,t)=>{const o=a.slice(),n=o.indexOf(t);-1!==n&&(e?o.splice(n,1,e):o.splice(n,1));const r={data:o,type:G,previousItem:t,item:e};s.call(void 0,r)}),[s,a]);return k.createElement("div",{id:i,style:r,ref:c,className:o.classNames("k-taskboard",n)},u,k.createElement("div",{className:"k-taskboard-content",style:R?{userSelect:"none"}:void 0},k.createElement("div",{className:"k-taskboard-columns-container",ref:m},(y||a).map((t=>k.createElement(ie,{key:t.id,tabIndex:e.tabIndex,column:t,tasks:D[t.status]||[],dragTargetRef:p,onTaskCreate:L,onTaskEdit:P,onTaskDelete:N,onColumnChange:x,columnComponent:e.column||me,cardComponent:e.card||ce,priorities:e.priorities}))))),R&&R.type===J&&k.createElement(re,{elementRef:T,style:{position:"absolute",width:R.width,height:R.height,top:E.top,left:E.left,zIndex:10,borderLeftColor:R.item.priority?R.item.priority.color:R.item.color},task:R.item,dragTargetRef:p,cardComponent:e.card||ce,onDeleteTask:o.noop,showEditPane:o.noop}),R&&R.type===G&&k.createElement(ie,{elementRef:v,style:{position:"absolute",width:R.width,height:R.height,top:E.top,left:E.left,zIndex:10},cardComponent:e.card||ce,columnComponent:e.column||me,column:R.item,tasks:D[R.item.status],priorities:e.priorities,dragTargetRef:p,onTaskDelete:N,onColumnChange:x,onTaskEdit:P,onTaskCreate:L}))}));pe.propTypes={columnData:a.array.isRequired,taskData:a.array.isRequired},pe.displayName="KendoReactTaskBoard";const ge=e=>{const{className:t,style:a,children:n}=e;return k.createElement("div",{style:a,className:o.classNames("k-taskboard-header",t)},k.createElement("div",{className:"k-taskboard-toolbar k-toolbar k-toolbar-md"},n))};ge.propTypes={children:a.node},ge.displayName="KendoReactTaskBoardToolbar",e.TaskBoard=pe,e.TaskBoardAddCard=te,e.TaskBoardCard=ce,e.TaskBoardCardBody=oe,e.TaskBoardCardHeader=ae,e.TaskBoardColumn=me,e.TaskBoardColumnBody=Z,e.TaskBoardColumnHeader=Q,e.TaskBoardConfirmDialog=$,e.TaskBoardEditCard=ee,e.TaskBoardPreviewDialog=ne,e.TaskBoardTaskEditPane=ue,e.TaskBoardToolbar=ge,e.useTaskEditing=_}));
8
+ !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-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-react-inputs"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-dialogs"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-popup"),require("@progress/kendo-react-dropdowns"),require("@progress/kendo-react-labels"),require("@progress/kendo-react-form")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-react-inputs","@progress/kendo-svg-icons","@progress/kendo-react-dialogs","@progress/kendo-react-layout","@progress/kendo-react-popup","@progress/kendo-react-dropdowns","@progress/kendo-react-labels","@progress/kendo-react-form"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTaskboard={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl,e.KendoReactButtons,e.KendoReactInputs,e.KendoSvgIcons,e.KendoReactDialogs,e.KendoReactLayout,e.KendoReactPopup,e.KendoReactDropdowns,e.KendoReactLabels,e.KendoReactForm)}(this,(function(e,t,a,o,n,r,i,l,s,d,c,u,m,p){"use strict";function g(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 k=g(t);const C={name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},f="taskBoard.editColumnButton",h="taskBoard.addCardButton",y="taskBoard.deleteColumnButton",b="taskBoard.editCardButton",E="taskBoard.deleteCardButton",B="taskBoard.deleteTaskDialogMessage",T="taskBoard.deleteTaskDialogTitle",v="taskBoard.deleteTaskConfirmButton",D="taskBoard.deleteTaskCancelButton",S="taskBoard.addCardTitle",w="taskBoard.addCardTitleLabel",I="taskBoard.addCardDescriptionLabel",R="taskBoard.addCardPriorityLabel",L="taskBoard.addCardCreateButton",P="taskBoard.deleteColumnDialogMessage",N="taskBoard.deleteColumnDialogTitle",x="taskBoard.deleteColumnConfirmButton",M="taskBoard.deleteColumnCancelButton",K="taskBoard.editCardPaneTitle",q="taskBoard.editCardPaneSaveButton",A="taskBoard.editPaneTitleLabel",H="taskBoard.editPaneDescriptionLabel",F="taskBoard.editPanePriorityLabel",j="taskBoard.editPaneCancelButton",O="taskBoard.previewPanePriorityLabel",z="taskBoard.previewPaneDeleteButton",X="taskBoard.previewPaneEditButton",Y={"taskBoard.toolbarAddColumnButton":"Add column","taskBoard.toolbarSearchField":"Search",[f]:"Edit column",[h]:"Add card",[y]:"Delete column",[b]:"Edit card",[E]:"Delete card",[B]:"Are you sure you want to delete this card?",[T]:"Delete Card",[v]:"Delete",[D]:"Cancel",[P]:"Are you sure you want to delete this column?",[N]:"Delete column?",[x]:"Delete",[M]:"Cancel",[S]:"Create new card",[L]:"Create",[j]:"Cancel",[K]:"Edit",[q]:"Save changes",[A]:"Title:",[H]:"Description:",[F]:"Priority:",[w]:"Title",[I]:"Description",[R]:"Priority",[O]:"Priority:",[z]:"Delete",[X]:"Edit"},U="data-taskboard-type",W="data-taskboard-id",V="data-taskboard-placeholder",G="column",J="task",Q=e=>{const{edit:t,title:a}=e.column;return k.createElement("div",{className:"k-taskboard-column-header"},k.createElement("div",{className:"k-taskboard-column-header-text k-text-ellipsis"},t?k.createElement(i.Input,{value:a,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):a),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:o.classNames("k-taskboard-column-header-actions",{"k-disabled":t})},k.createElement(r.Button,{fillMode:"flat",icon:"pencil",svgIcon:l.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),k.createElement(r.Button,{fillMode:"flat",icon:"plus",svgIcon:l.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),k.createElement(r.Button,{fillMode:"flat",icon:"x",svgIcon:l.xIcon,title:e.closeButtonTitle,onClick:e.onColumnDelete})))};Q.displayName="KendoReactTaskBoardColumnHeader";const Z=e=>k.createElement("div",{className:"k-taskboard-column-cards-container"},k.createElement("div",{className:"k-taskboard-column-cards"},e.children));Z.displayName="KendoReactTaskBoardColumnBody";const $=e=>{const{onClose:t,onConfirm:a,dialogMessage:o,dialogTitle:n,dialogConfirmButton:i,dialogCancelButton:l}=e;return k.createElement(s.Dialog,{title:n,closeIcon:!1},o,k.createElement(s.DialogActionsBar,{layout:"end"},k.createElement(r.Button,{themeColor:"primary",onClick:a},i),k.createElement(r.Button,{onClick:t},l)))};$.propTypes={onClose:a.func.isRequired,onConfirm:a.func.isRequired,dialogMessage:a.string.isRequired,dialogTitle:a.string.isRequired,dialogConfirmButton:a.string.isRequired,dialogCancelButton:a.string.isRequired},$.displayName="KendoReactTaskBoardConfirmDialog";const _=({onSave:e,task:t,priorities:a})=>{const[o,n]=k.useState(t?t.title:""),[r,i]=k.useState(t?t.description:""),[l,s]=k.useState(t?t.priority:a[0]),d=k.useCallback((e=>{n(e.value)}),[]),c=k.useCallback((e=>{i(e.value)}),[]),u=k.useCallback((e=>{s(e.target.value)}),[]),m=k.useCallback((a=>{const n={id:void 0,status:"",...t||{},title:o,description:r,priority:l};e.call(void 0,n,t)}),[e,t,o,r,l]);return{onTitleChange:d,title:o,onDescriptionChange:c,description:r,onPriorityChange:u,priority:l,onSave:m}},ee=e=>{const{onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l,onSave:s}=_(e),d=n.useLocalization();return k.createElement(e.editPane,{header:d.toLanguageString(K,Y[K])+e.task.title,titleInputTitle:d.toLanguageString(w,Y[w]),descriptionInputTitle:d.toLanguageString(I,Y[I]),priorityDropDownTitle:d.toLanguageString(R,Y[R]),task:e.task,saveButton:d.toLanguageString(q,Y[q]),cancelButton:d.toLanguageString(j,Y[j]),priorities:e.priorities,titleLabel:d.toLanguageString(A,Y[A]),descriptionLabel:d.toLanguageString(H,Y[H]),priorityLabel:d.toLanguageString(F,Y[F]),onSave:s,onClose:e.onClose,onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l})};ee.propTypes={},ee.displayName="KendoReactTaskBoardEditCard";const te=e=>{const{onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l,onSave:s}=_(e),d=n.useLocalization();return k.createElement(e.editPane,{header:d.toLanguageString(S,Y[S]),titleInputTitle:d.toLanguageString(w,Y[w]),descriptionInputTitle:d.toLanguageString(I,Y[I]),priorityDropDownTitle:d.toLanguageString(R,Y[R]),titleLabel:d.toLanguageString(A,Y[A]),descriptionLabel:d.toLanguageString(H,Y[H]),priorityLabel:d.toLanguageString(F,Y[F]),saveButton:d.toLanguageString(L,Y[L]),cancelButton:d.toLanguageString(j,Y[j]),priorities:e.priorities,onSave:s,onClose:e.onClose,onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l})};te.propTypes={},te.displayName="KendoReactTaskBoardAddCard";const ae=e=>{const t=k.useRef();return k.createElement(d.CardHeader,{className:"k-hbox"},k.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-card-header-actions"},k.createElement(r.Button,{className:"k-card-details",fillMode:"flat",themeColor:"base",icon:"more-vertical",svgIcon:l.moreVerticalIcon,ref:t,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),k.createElement(c.Popup,{anchor:t.current&&t.current.element,show:e.showMenu,ref:e.popupRef},k.createElement(d.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};ae.displayName="KendoReactTaskBoardCardHeader";const oe=e=>k.createElement(d.CardBody,null,e.children);oe.displayName="KendoReactTaskBoardCardBody";const ne=e=>k.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},k.createElement("div",{className:"k-taskboard-pane-header"},k.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-taskboard-pane-header-actions"},k.createElement(r.Button,{icon:"x",svgIcon:l.xIcon,fillMode:"flat",onClick:e.onClosePreviewPane}))),k.createElement("div",{className:"k-taskboard-pane-content"},k.createElement("p",null,e.description),k.createElement("p",null,e.priorityLabel," ",k.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),k.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},k.createElement(r.Button,{onClick:e.onTaskDelete},e.delete),k.createElement(r.Button,{themeColor:"primary",onClick:e.onTaskEdit},e.edit)));ne.displayName="KendoReactTaskBoardPreviewDialog";const re=e=>{const{onDeleteTask:t,showEditPane:a,task:o,style:r,dragTargetRef:i,elementRef:s}=e,[c,u]=k.useState(!1),[m,p]=k.useState(!1),[g,C]=k.useState(!1),f=k.useRef(null),h=n.useLocalization(),y=[{text:h.toLanguageString(b,Y[b]),icon:"pencil",svgIcon:l.pencilIcon,data:()=>{a(o),u(!c)}},{text:h.toLanguageString(E,Y[E]),icon:"trash",svgIcon:l.trashIcon,data:()=>{p(!m),u(!c)}}],S=()=>{C(!0)};return o.isPlaceholder&&i&&i.current?k.createElement("div",{style:{width:i.current.width,height:i.current.height},className:"k-taskboard-drag-placeholder",[V]:!0}):k.createElement(e.cardComponent,{task:o,style:r,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:s,showMenu:c,showDeleteConfirm:m,showTaskPreviewPane:g,menuItems:y,popupRef:f,confirmDialogMessage:h.toLanguageString(B,Y[B]),confirmDialogTitle:h.toLanguageString(T,Y[T]),confirmDialogConfirmButton:h.toLanguageString(v,Y[v]),confirmDialogCancelButton:h.toLanguageString(D,Y[D]),previewDialogPriorityLabel:h.toLanguageString(O,Y[O]),previewDialogDelete:h.toLanguageString(z,Y[z]),previewDialogEdit:h.toLanguageString(X,Y[X]),onShowPreviewPane:S,onClosePreviewPane:()=>{C(!1)},onMenuItemSelect:e=>{e.item.data()},onShowMenu:()=>{u(!0)},onHideMenu:()=>{u(!1)},onMenuButtonBlur:e=>{const t=f.current&&f.current.element;t&&t.contains(e.relatedTarget)||u(!1)},onTaskDelete:t,onTaskEdit:()=>{a(o),S()},onCloseConfirmDialog:()=>{p(!m)},card:d.Card,cardHeader:ae,cardBody:oe,confirmDialog:$,previewDialog:ne})};re.propTypes={task:a.object.isRequired},re.displayName="KendoReactTaskBoardCardBase";const ie=e=>{const[t,a]=k.useState(!1),[o,r]=k.useState(!1),[i,l]=k.useState(!1),[s,d]=k.useState(),{dragTargetRef:c,column:u,onColumnChange:m,tasks:p,elementRef:g,style:C,onTaskCreate:b,onTaskEdit:E,onTaskDelete:B}=e,T=n.useLocalization(),v=k.useCallback((e=>{const t={...u,title:e.value};m.call(void 0,t,u)}),[u,m]),D=k.useCallback((()=>{const e={...u,edit:!0};m.call(void 0,e,u)}),[u,m]),S=k.useCallback((()=>{const e={...u,edit:!1};m.call(void 0,e,u)}),[u,m]),w=k.useCallback((()=>{m.call(void 0,null,u)}),[u,m]),I=e=>{r(!0),d(e)},R=k.useCallback((e=>{a(!1),b.call(void 0,{...e,status:u.status})}),[b,u]),L=k.useCallback(((e,t)=>{r(!1),E.call(void 0,e,t)}),[E]),K=k.useCallback((e=>{B.call(void 0,e)}),[B]);if(u.isPlaceholder&&c&&c.current){const e=c.current?c.current.width:0,t=c.current?c.current.height:0;return k.createElement("div",{style:{width:e,height:t},className:"k-taskboard-column k-taskboard-drag-placeholder",[V]:!0})}return k.createElement(e.columnComponent,{column:e.column,tasks:p,priorities:e.priorities,style:c?{overflow:"visible",...C}:C,tabIndex:e.tabIndex,elementRef:g,onTaskCreate:R,onTaskEdit:L,onTaskDelete:K,card:e.cardComponent,header:Q,body:Z,confirmDialog:$,editCardDialog:ee,addCardDialog:te,onTitleChange:v,onColumnEnterEdit:D,onColumnExitEdit:S,onColumnConfirmDelete:w,onShowAddCardDialog:()=>{a(!0)},onShowEditCardPane:I,onColumnDelete:()=>{l(!i)},onCloseDialog:()=>{a(!1),r(!1)},showAddCard:t,showEditCard:o,showColumnConfirmDelete:i,editedTask:s,confirmDialogMessage:T.toLanguageString(P,Y[P]),confirmDialogTitle:T.toLanguageString(N,Y[N]),confirmDialogConfirmButton:T.toLanguageString(x,Y[x]),confirmDialogCancelButton:T.toLanguageString(M,Y[M]),editButtonTitle:T.toLanguageString(f,Y[f]),addButtonTitle:T.toLanguageString(h,Y[h]),closeButtonTitle:T.toLanguageString(y,Y[y])},p&&p.map((t=>k.createElement(re,{key:t.id,tabIndex:e.tabIndex,task:t,disabled:!!e.column.edit,onDeleteTask:()=>K(t),showEditPane:()=>I(t),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:t.priority.color},cardComponent:e.cardComponent}))))};ie.propTypes={column:a.object.isRequired,taskMap:a.object},ie.displayName="KendoReactTaskBoardColumn";const le=e=>{for(;e;){if(!e.getAttribute)return null;const t=e.getAttribute(W);if(t)return{id:t,type:e.getAttribute(U)||"",element:e};e=e.parentNode}return null},se=(e,t)=>{const a=t.dataItem.color,o=k.createElement(k.Fragment,null,k.createElement("span",{style:{backgroundColor:a}}," "),e.props.children);return k.cloneElement(e,e.props,o)},de=(e,t)=>{if(!t)return e;const a=k.createElement(k.Fragment,null,k.createElement("span",{style:{backgroundColor:t.color}}," "),k.createElement("span",null,"  ",e.props.children));return k.cloneElement(e,{...e.props},a)},ce=e=>k.createElement(k.Fragment,null,k.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:o.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[U]:J,[W]:e.task.id,tabIndex:e.tabIndex},k.createElement(e.cardHeader,{showMenu:e.showMenu,menuItems:e.menuItems,popupRef:e.popupRef,title:e.task.title,task:e.task,onShowPreviewPane:e.onShowPreviewPane,onShowMenu:e.onShowMenu,onHideMenu:e.onHideMenu,onMenuButtonBlur:e.onMenuButtonBlur,onMenuItemSelect:e.onMenuItemSelect}),k.createElement(e.cardBody,{task:e.task},e.task.description)),e.showDeleteConfirm&&k.createElement(e.confirmDialog,{onConfirm:e.onTaskDelete,onClose:e.onCloseConfirmDialog,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}),e.showTaskPreviewPane&&k.createElement(e.previewDialog,{title:e.task.title,description:e.task.description,priorityLabel:e.previewDialogPriorityLabel,delete:e.previewDialogDelete,edit:e.previewDialogEdit,onClosePreviewPane:e.onClosePreviewPane,onTaskDelete:e.onTaskDelete,onTaskEdit:e.onTaskEdit,priority:e.task.priority}));ce.displayName="KendoReactTaskBoardCard";const ue=e=>k.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},k.createElement("div",{className:"k-taskboard-pane-header"},k.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-taskboard-pane-header-actions"},k.createElement(r.Button,{icon:"x",svgIcon:l.xIcon,fillMode:"flat",onClick:e.onClose}))),k.createElement("div",{className:"k-taskboard-pane-content"},k.createElement("div",{role:"form","data-role":"form",className:"k-form"},k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"title"},e.titleLabel),k.createElement(i.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"description"},e.descriptionLabel),k.createElement(i.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"priority"},e.priorityLabel),k.createElement(u.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:se,valueRender:de,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),k.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},k.createElement(r.Button,{onClick:e.onClose},e.cancelButton),k.createElement(r.Button,{themeColor:"primary",onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));ue.propTypes={},ue.displayName="KendoReactTaskBoardEditPane";const me=e=>k.createElement(k.Fragment,null,k.createElement("div",{ref:e.elementRef,style:e.style,className:o.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[U]:G,[W]:e.column.id},k.createElement(e.header,{column:e.column,tasks:e.tasks,onTitleChange:e.onTitleChange,onColumnExitEdit:e.onColumnExitEdit,editButtonTitle:e.editButtonTitle,onColumnEnterEdit:e.onColumnEnterEdit,addButtonTitle:e.addButtonTitle,onShowAddCardDialog:e.onShowAddCardDialog,closeButtonTitle:e.closeButtonTitle,onColumnDelete:e.onColumnDelete}),k.createElement(e.body,null,e.children)),e.showAddCard&&k.createElement(e.addCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskCreate,priorities:e.priorities,editPane:ue}),e.showEditCard&&e.editedTask&&k.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:ue}),e.showColumnConfirmDelete&&k.createElement(e.confirmDialog,{onClose:e.onColumnDelete,onConfirm:e.onColumnConfirmDelete,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}));me.displayName="KendoReactTaskBoardColumn";const pe=k.forwardRef(((e,t)=>{o.validatePackage(C);const{columnData:a=[],className:n,style:r,id:i,taskData:l=[],onChange:s}=e,d=k.useRef(null),c=k.useRef(null);k.useImperativeHandle(d,(()=>({props:e}))),k.useImperativeHandle(t,(()=>d.current));const u=k.Children.toArray(e.children).filter((e=>e&&e.type&&"KendoReactTaskBoardToolbar"===e.type.displayName)),m=k.useRef(null),p=k.useRef(null),g=k.useRef(null),[f,h]=k.useState(null),[y,b]=k.useState(null),[E,B]=k.useState({top:0,left:0}),[T,v]=k.useState(),D=k.useRef(null),S=k.useRef(null),w=k.useMemo((()=>{const e={};return(f||l).forEach((t=>{const a=t.status;e[a]||(e[a]=[]),e[a].push(t)})),e}),[l,f]),I=k.useCallback((e=>{const t=e.originalEvent.target;if(t.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const n=le(t),r=c.current;if(n&&r){const i=n.type===G;if(i&&!t.closest(".k-taskboard-column-header"))return;const s=n.element.getBoundingClientRect(),d=r.getBoundingClientRect();g.current={x:e.clientX-s.left+d.left,y:e.clientY-s.top+d.top};const c=i?a:l,u=i?b:h,m=c.findIndex((e=>String(e.id)===n.id)),k=c[m];if(-1===m||k.edit)return;const C=o.clone(k);C.isPlaceholder=!0;const f=[...c];f[m]=C,p.current={...n,index:m,item:k,width:s.width,height:s.height},v(m),B({top:e.clientY-g.current.y,left:e.clientX-g.current.x}),u(f)}}),[a,l]),R=k.useCallback((e=>{const t=p.current,n=D.current&&D.current.element||S.current;if(t&&n){B({top:e.clientY-g.current.y,left:e.clientX-g.current.x}),n.style.visibility="hidden";const r=document.elementFromPoint(e.clientX,e.clientY);if(n.style.visibility="",r&&r.getAttribute(V))return;const i=r&&le(r);if(i){let e;const n=i.type===t.type,r=t.type===G,l=(r?y:f)||[],s=r?b:h;if(r||n){if(e=((e,t,a)=>{let o=-1,n=-1;for(let r=0;r<a.length;r++){const i=String(a[r].id);if(i===e&&(n=r),i===t&&(o=r),-1!==o&&-1!==n)return{dragIndex:n,dropIndex:o}}return null})(t.id,i.id,l),e){const a=l[e.dragIndex],n=l[e.dropIndex],i=o.clone(a);r||(i.status=n.status);const d=[...l];d.splice(e.dragIndex,1),d.splice(e.dropIndex,0,i),t.index=e.dropIndex,s(d)}}else{const e=l.findIndex((e=>String(e.id)===t.id)),o=a.findIndex((e=>String(e.id)===i.id));if(-1!==e&&-1!==o){const n=l[e],r=a[o].status;if(w[r])return;n.status=r;const i=[...l];i.splice(e,1),i.push(n),t.index=i.length-1,s(i)}}}}}),[y,f,a,w]),L=k.useCallback((()=>{const e=p.current;if(s&&e){const t=(e.type===G?y:f)||[],a=t[e.index];delete a.isPlaceholder;const o={data:t,type:e.type,previousItem:{...e.item,index:T},item:{...a,index:e.index}};s.call(void 0,o)}p.current=null,g.current=null,h(null),b(null),B({top:0,left:0}),v(void 0)}),[y,f,s]);o.useDraggable(m,{onDragStart:I,onDrag:R,onDragEnd:L});const P=p.current,N=k.useCallback((e=>{const t={data:[...l,e],type:J,previousItem:null,item:e};s.call(void 0,t)}),[s,l]),x=k.useCallback(((e,t)=>{const a=l.slice(),o=l.indexOf(t);-1!==o&&a.splice(o,1,e);const n={data:a,type:J,previousItem:t,item:e};s.call(void 0,n)}),[s,l]),M=k.useCallback((e=>{const t={data:l.filter((t=>t!==e)),type:J,previousItem:e,item:null};s.call(void 0,t)}),[s,l]),K=k.useCallback(((e,t)=>{const o=a.slice(),n=o.indexOf(t);-1!==n&&(e?o.splice(n,1,e):o.splice(n,1));const r={data:o,type:G,previousItem:t,item:e};s.call(void 0,r)}),[s,a]);return k.createElement("div",{id:i,style:r,ref:c,className:o.classNames("k-taskboard",n)},u,k.createElement("div",{className:"k-taskboard-content",style:P?{userSelect:"none"}:void 0},k.createElement("div",{className:"k-taskboard-columns-container",ref:m},(y||a).map((t=>k.createElement(ie,{key:t.id,tabIndex:e.tabIndex,column:t,tasks:w[t.status]||[],dragTargetRef:p,onTaskCreate:N,onTaskEdit:x,onTaskDelete:M,onColumnChange:K,columnComponent:e.column||me,cardComponent:e.card||ce,priorities:e.priorities}))))),P&&P.type===J&&k.createElement(re,{elementRef:D,style:{position:"absolute",width:P.width,height:P.height,top:E.top,left:E.left,zIndex:10,borderLeftColor:P.item.priority?P.item.priority.color:P.item.color},task:P.item,dragTargetRef:p,cardComponent:e.card||ce,onDeleteTask:o.noop,showEditPane:o.noop}),P&&P.type===G&&k.createElement(ie,{elementRef:S,style:{position:"absolute",width:P.width,height:P.height,top:E.top,left:E.left,zIndex:10},cardComponent:e.card||ce,columnComponent:e.column||me,column:P.item,tasks:w[P.item.status],priorities:e.priorities,dragTargetRef:p,onTaskDelete:M,onColumnChange:K,onTaskEdit:x,onTaskCreate:N}))}));pe.propTypes={columnData:a.array.isRequired,taskData:a.array.isRequired},pe.displayName="KendoReactTaskBoard";const ge=e=>{const{className:t,style:a,children:n}=e;return k.createElement("div",{style:a,className:o.classNames("k-taskboard-header",t)},k.createElement("div",{className:"k-taskboard-toolbar k-toolbar k-toolbar-md"},n))};ge.propTypes={children:a.node},ge.displayName="KendoReactTaskBoardToolbar",e.TaskBoard=pe,e.TaskBoardAddCard=te,e.TaskBoardCard=ce,e.TaskBoardCardBody=oe,e.TaskBoardCardHeader=ae,e.TaskBoardColumn=me,e.TaskBoardColumnBody=Z,e.TaskBoardColumnHeader=Q,e.TaskBoardConfirmDialog=$,e.TaskBoardEditCard=ee,e.TaskBoardPreviewDialog=ne,e.TaskBoardTaskEditPane=ue,e.TaskBoardToolbar=ge,e.useTaskEditing=_}));
package/index.d.mts CHANGED
@@ -375,6 +375,10 @@ export declare interface TaskBoardColumnHeaderProps {
375
375
  * Represents the task board column model.
376
376
  */
377
377
  export declare interface TaskBoardColumnModel extends ItemModel {
378
+ /**
379
+ * Determined the index of the TaskBoardTaskModel.
380
+ */
381
+ index?: number;
378
382
  }
379
383
 
380
384
  /**
@@ -793,6 +797,10 @@ export declare interface TaskBoardTaskModel extends ItemModel {
793
797
  * Determined the priority of the TaskBoardTaskModel.
794
798
  */
795
799
  priority: TaskBoardPriority;
800
+ /**
801
+ * Determined the index of the TaskBoardTaskModel.
802
+ */
803
+ index?: number;
796
804
  }
797
805
 
798
806
  /**
package/index.d.ts CHANGED
@@ -375,6 +375,10 @@ export declare interface TaskBoardColumnHeaderProps {
375
375
  * Represents the task board column model.
376
376
  */
377
377
  export declare interface TaskBoardColumnModel extends ItemModel {
378
+ /**
379
+ * Determined the index of the TaskBoardTaskModel.
380
+ */
381
+ index?: number;
378
382
  }
379
383
 
380
384
  /**
@@ -793,6 +797,10 @@ export declare interface TaskBoardTaskModel extends ItemModel {
793
797
  * Determined the priority of the TaskBoardTaskModel.
794
798
  */
795
799
  priority: TaskBoardPriority;
800
+ /**
801
+ * Determined the index of the TaskBoardTaskModel.
802
+ */
803
+ index?: number;
796
804
  }
797
805
 
798
806
  /**
package/package-metadata.mjs CHANGED
@@ -10,7 +10,7 @@ const e = {
10
10
  name: "@progress/kendo-react-taskboard",
11
11
  productName: "KendoReact",
12
12
  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
13
- publishDate: 1723121849,
13
+ publishDate: 1723132542,
14
14
  version: "",
15
15
  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
16
16
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-react-taskboard",
3
- "version": "8.2.1-develop.4",
3
+ "version": "8.2.1-develop.5",
4
4
  "description": "KendoReact TaskBoard package",
5
5
  "author": "Progress",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -24,17 +24,17 @@
24
24
  "peerDependencies": {
25
25
  "@progress/kendo-data-query": "^1.0.0",
26
26
  "@progress/kendo-licensing": "^1.3.4",
27
- "@progress/kendo-react-buttons": "8.2.1-develop.4",
28
- "@progress/kendo-react-common": "8.2.1-develop.4",
29
- "@progress/kendo-react-dialogs": "8.2.1-develop.4",
30
- "@progress/kendo-react-dropdowns": "8.2.1-develop.4",
31
- "@progress/kendo-react-form": "8.2.1-develop.4",
32
- "@progress/kendo-react-indicators": "8.2.1-develop.4",
33
- "@progress/kendo-react-inputs": "8.2.1-develop.4",
34
- "@progress/kendo-react-intl": "8.2.1-develop.4",
35
- "@progress/kendo-react-labels": "8.2.1-develop.4",
36
- "@progress/kendo-react-layout": "8.2.1-develop.4",
37
- "@progress/kendo-react-popup": "8.2.1-develop.4",
27
+ "@progress/kendo-react-buttons": "8.2.1-develop.5",
28
+ "@progress/kendo-react-common": "8.2.1-develop.5",
29
+ "@progress/kendo-react-dialogs": "8.2.1-develop.5",
30
+ "@progress/kendo-react-dropdowns": "8.2.1-develop.5",
31
+ "@progress/kendo-react-form": "8.2.1-develop.5",
32
+ "@progress/kendo-react-indicators": "8.2.1-develop.5",
33
+ "@progress/kendo-react-inputs": "8.2.1-develop.5",
34
+ "@progress/kendo-react-intl": "8.2.1-develop.5",
35
+ "@progress/kendo-react-labels": "8.2.1-develop.5",
36
+ "@progress/kendo-react-layout": "8.2.1-develop.5",
37
+ "@progress/kendo-react-popup": "8.2.1-develop.5",
38
38
  "@progress/kendo-svg-icons": "^3.0.0",
39
39
  "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
40
40
  "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"