@progress/kendo-react-taskboard 7.0.3-develop.9 → 7.1.0-develop.10

package/dist/cdn/js/kendo-react-taskboard.js

@@ -2,4 +2,4 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------*/
-(function(r,J){typeof exports=="object"&&typeof module<"u"?J(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")):typeof define=="function"&&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"],J):(r=typeof globalThis<"u"?globalThis:r||self,J(r.KendoReactTaskboard={},r.React,r.PropTypes,r.KendoReactCommon,r.KendoReactIntl,r.KendoReactButtons,r.KendoReactInputs,r.KendoSvgIcons,r.KendoReactDialogs,r.KendoReactLayout,r.KendoReactPopup,r.KendoReactDropdowns,r.KendoReactLabels,r.KendoReactForm))})(this,function(r,J,w,I,de,S,De,A,tt,ce,nt,ot,he,be){"use strict";"use client";function it(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,s.get?s:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const t=it(J),rt={name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},lt="taskBoard.toolbarAddColumnButton",st="taskBoard.toolbarSearchField",ye="taskBoard.editColumnButton",ve="taskBoard.addCardButton",we="taskBoard.deleteColumnButton",Se="taskBoard.editCardButton",Pe="taskBoard.deleteCardButton",Ie="taskBoard.deleteTaskDialogMessage",Le="taskBoard.deleteTaskDialogTitle",Ne="taskBoard.deleteTaskConfirmButton",Me="taskBoard.deleteTaskCancelButton",Re="taskBoard.addCardTitle",Q="taskBoard.addCardTitleLabel",Z="taskBoard.addCardDescriptionLabel",$="taskBoard.addCardPriorityLabel",xe="taskBoard.addCardCreateButton",Ae="taskBoard.deleteColumnDialogMessage",Ke="taskBoard.deleteColumnDialogTitle",qe="taskBoard.deleteColumnConfirmButton",Oe="taskBoard.deleteColumnCancelButton",He="taskBoard.editCardPaneTitle",je="taskBoard.editCardPaneSaveButton",ee="taskBoard.editPaneTitleLabel",te="taskBoard.editPaneDescriptionLabel",ae="taskBoard.editPanePriorityLabel",ne="taskBoard.editPaneCancelButton",ze="taskBoard.previewPanePriorityLabel",Fe="taskBoard.previewPaneDeleteButton",_e="taskBoard.previewPaneEditButton",i={[lt]:"Add column",[st]:"Search",[ye]:"Edit column",[ve]:"Add card",[we]:"Delete column",[Se]:"Edit card",[Pe]:"Delete card",[Ie]:"Are you sure you want to delete this card?",[Le]:"Delete Card",[Ne]:"Delete",[Me]:"Cancel",[Ae]:"Are you sure you want to delete this column?",[Ke]:"Delete column?",[qe]:"Delete",[Oe]:"Cancel",[Re]:"Create new card",[xe]:"Create",[ne]:"Cancel",[He]:"Edit",[je]:"Save changes",[ee]:"Title:",[te]:"Description:",[ae]:"Priority:",[Q]:"Title",[Z]:"Description",[$]:"Priority",[ze]:"Priority:",[Fe]:"Delete",[_e]:"Edit"},Ve="data-taskboard-type",pe="data-taskboard-id",Ye="data-taskboard-placeholder",X="column",oe="task",Ue=e=>{const{edit:a,title:o}=e.column;return t.createElement("div",{className:"k-taskboard-column-header"},t.createElement("div",{className:"k-taskboard-column-header-text k-text-ellipsis"},a?t.createElement(De.Input,{value:o,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):o),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:I.classNames("k-taskboard-column-header-actions",{"k-disabled":a})},t.createElement(S.Button,{fillMode:"flat",icon:"pencil",svgIcon:A.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),t.createElement(S.Button,{fillMode:"flat",icon:"plus",svgIcon:A.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),t.createElement(S.Button,{fillMode:"flat",icon:"x",svgIcon:A.xIcon,title:e.closeButtonTitle,onClick:e.onColumnDelete})))};Ue.displayName="KendoReactTaskBoardColumnHeader";const Xe=e=>t.createElement("div",{className:"k-taskboard-column-cards-container"},t.createElement("div",{className:"k-taskboard-column-cards"},e.children));Xe.displayName="KendoReactTaskBoardColumnBody";const ie=e=>{const{onClose:a,onConfirm:o,dialogMessage:s,dialogTitle:T,dialogConfirmButton:u,dialogCancelButton:c}=e;return t.createElement(tt.Dialog,{title:T,closeIcon:!1},s,t.createElement(tt.DialogActionsBar,{layout:"end"},t.createElement(S.Button,{themeColor:"primary",onClick:o},u),t.createElement(S.Button,{onClick:a},c)))};ie.propTypes={onClose:w.func.isRequired,onConfirm:w.func.isRequired,dialogMessage:w.string.isRequired,dialogTitle:w.string.isRequired,dialogConfirmButton:w.string.isRequired,dialogCancelButton:w.string.isRequired},ie.displayName="KendoReactTaskBoardConfirmDialog";const We=({onSave:e,task:a,priorities:o})=>{const[s,T]=t.useState(a?a.title:""),[u,c]=t.useState(a?a.description:""),[m,l]=t.useState(a?a.priority:o[0]),h=t.useCallback(C=>{T(C.value)},[]),f=t.useCallback(C=>{c(C.value)},[]),b=t.useCallback(C=>{l(C.target.value)},[]),L=t.useCallback(C=>{const B={id:void 0,status:"",...a||{},title:s,description:u,priority:m};e.call(void 0,B,a)},[e,a,s,u,m]);return{onTitleChange:h,title:s,onDescriptionChange:f,description:u,onPriorityChange:b,priority:m,onSave:L}},ue=e=>{const{onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c,onSave:m}=We(e),l=de.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(He,i[He])+e.task.title,titleInputTitle:l.toLanguageString(Q,i[Q]),descriptionInputTitle:l.toLanguageString(Z,i[Z]),priorityDropDownTitle:l.toLanguageString($,i[$]),task:e.task,saveButton:l.toLanguageString(je,i[je]),cancelButton:l.toLanguageString(ne,i[ne]),priorities:e.priorities,titleLabel:l.toLanguageString(ee,i[ee]),descriptionLabel:l.toLanguageString(te,i[te]),priorityLabel:l.toLanguageString(ae,i[ae]),onSave:m,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c})};ue.propTypes={},ue.displayName="KendoReactTaskBoardEditCard";const me=e=>{const{onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c,onSave:m}=We(e),l=de.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Re,i[Re]),titleInputTitle:l.toLanguageString(Q,i[Q]),descriptionInputTitle:l.toLanguageString(Z,i[Z]),priorityDropDownTitle:l.toLanguageString($,i[$]),titleLabel:l.toLanguageString(ee,i[ee]),descriptionLabel:l.toLanguageString(te,i[te]),priorityLabel:l.toLanguageString(ae,i[ae]),saveButton:l.toLanguageString(xe,i[xe]),cancelButton:l.toLanguageString(ne,i[ne]),priorities:e.priorities,onSave:m,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c})};me.propTypes={},me.displayName="KendoReactTaskBoardAddCard";const Ge=e=>{const a=t.useRef();return t.createElement(ce.CardHeader,{className:"k-hbox"},t.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-card-header-actions"},t.createElement(S.Button,{fillMode:"flat",icon:"more-vertical",svgIcon:A.moreVerticalIcon,ref:a,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(nt.Popup,{anchor:a.current&&a.current.element,show:e.showMenu,ref:e.popupRef},t.createElement(ce.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};Ge.displayName="KendoReactTaskBoardCardHeader";const Je=e=>t.createElement(ce.CardBody,null,e.children);Je.displayName="KendoReactTaskBoardCardBody";const Qe=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(S.Button,{icon:"x",svgIcon:A.xIcon,fillMode:"flat",onClick:e.onClosePreviewPane}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("p",null,e.description),t.createElement("p",null,e.priorityLabel," ",t.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(S.Button,{onClick:e.onTaskDelete},e.delete),t.createElement(S.Button,{themeColor:"primary",onClick:e.onTaskEdit},e.edit)));Qe.displayName="KendoReactTaskBoardPreviewDialog";const ge=e=>{const{onDeleteTask:a,showEditPane:o,task:s,style:T,dragTargetRef:u,elementRef:c}=e,[m,l]=t.useState(!1),[h,f]=t.useState(!1),[b,L]=t.useState(!1),C=t.useRef(null),B=de.useLocalization(),N=[{text:B.toLanguageString(Se,i[Se]),icon:"pencil",svgIcon:A.pencilIcon,data:()=>{o(s),l(!m)}},{text:B.toLanguageString(Pe,i[Pe]),icon:"trash",svgIcon:A.trashIcon,data:()=>{f(!h),l(!m)}}],K=V=>{V.item.data()},R=()=>{l(!0)},v=()=>{l(!1)},q=V=>{const p=C.current&&C.current.element;p&&p.contains(V.relatedTarget)||l(!1)},_=()=>{f(!h)},O=()=>{L(!0)},W=()=>{L(!1)},H=()=>{o(s),O()};return s.isPlaceholder&&u&&u.current?t.createElement("div",{style:{width:u.current.width,height:u.current.height},className:"k-taskboard-drag-placeholder",[Ye]:!0}):t.createElement(e.cardComponent,{task:s,style:T,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:c,showMenu:m,showDeleteConfirm:h,showTaskPreviewPane:b,menuItems:N,popupRef:C,confirmDialogMessage:B.toLanguageString(Ie,i[Ie]),confirmDialogTitle:B.toLanguageString(Le,i[Le]),confirmDialogConfirmButton:B.toLanguageString(Ne,i[Ne]),confirmDialogCancelButton:B.toLanguageString(Me,i[Me]),previewDialogPriorityLabel:B.toLanguageString(ze,i[ze]),previewDialogDelete:B.toLanguageString(Fe,i[Fe]),previewDialogEdit:B.toLanguageString(_e,i[_e]),onShowPreviewPane:O,onClosePreviewPane:W,onMenuItemSelect:K,onShowMenu:R,onHideMenu:v,onMenuButtonBlur:q,onTaskDelete:a,onTaskEdit:H,onCloseConfirmDialog:_,card:ce.Card,cardHeader:Ge,cardBody:Je,confirmDialog:ie,previewDialog:Qe})};ge.propTypes={task:w.object.isRequired},ge.displayName="KendoReactTaskBoardCardBase";const ke=e=>{const[a,o]=t.useState(!1),[s,T]=t.useState(!1),[u,c]=t.useState(!1),[m,l]=t.useState(),{dragTargetRef:h,column:f,onColumnChange:b,tasks:L,elementRef:C,style:B,onTaskCreate:N,onTaskEdit:K,onTaskDelete:R}=e,v=de.useLocalization(),q=t.useCallback(g=>{const j={...f,title:g.value};b.call(void 0,j,f)},[f,b]),_=t.useCallback(()=>{const g={...f,edit:!0};b.call(void 0,g,f)},[f,b]),O=t.useCallback(()=>{const g={...f,edit:!1};b.call(void 0,g,f)},[f,b]),W=t.useCallback(()=>{b.call(void 0,null,f)},[f,b]),H=()=>{c(!u)},V=()=>{o(!0)},p=g=>{T(!0),l(g)},et=()=>{o(!1),T(!1)},D=t.useCallback(g=>{o(!1),N.call(void 0,{...g,status:f.status})},[N,f]),Be=t.useCallback((g,j)=>{T(!1),K.call(void 0,g,j)},[K]),se=t.useCallback(g=>{R.call(void 0,g)},[R]);if(f.isPlaceholder&&h&&h.current){const g=h.current?h.current.width:0,j=h.current?h.current.height:0;return t.createElement("div",{style:{width:g,height:j},className:"k-taskboard-column k-taskboard-drag-placeholder",[Ye]:!0})}return t.createElement(e.columnComponent,{column:e.column,tasks:L,priorities:e.priorities,style:h?{overflow:"visible",...B}:B,tabIndex:e.tabIndex,elementRef:C,onTaskCreate:D,onTaskEdit:Be,onTaskDelete:se,card:e.cardComponent,header:Ue,body:Xe,confirmDialog:ie,editCardDialog:ue,addCardDialog:me,onTitleChange:q,onColumnEnterEdit:_,onColumnExitEdit:O,onColumnConfirmDelete:W,onShowAddCardDialog:V,onShowEditCardPane:p,onColumnDelete:H,onCloseDialog:et,showAddCard:a,showEditCard:s,showColumnConfirmDelete:u,editedTask:m,confirmDialogMessage:v.toLanguageString(Ae,i[Ae]),confirmDialogTitle:v.toLanguageString(Ke,i[Ke]),confirmDialogConfirmButton:v.toLanguageString(qe,i[qe]),confirmDialogCancelButton:v.toLanguageString(Oe,i[Oe]),editButtonTitle:v.toLanguageString(ye,i[ye]),addButtonTitle:v.toLanguageString(ve,i[ve]),closeButtonTitle:v.toLanguageString(we,i[we])},L&&L.map(g=>t.createElement(ge,{key:g.id,tabIndex:e.tabIndex,task:g,disabled:!!e.column.edit,onDeleteTask:()=>se(g),showEditPane:()=>p(g),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:g.priority.color},cardComponent:e.cardComponent})))};ke.propTypes={column:w.object.isRequired,taskMap:w.object},ke.displayName="KendoReactTaskBoardColumn";const dt=(e,a,o)=>{let s=-1,T=-1;for(let u=0;u<o.length;u++){const c=String(o[u].id);if(c===e&&(T=u),c===a&&(s=u),s!==-1&&T!==-1)return{dragIndex:T,dropIndex:s}}return null},at=e=>{for(;e;){if(!e.getAttribute)return null;const a=e.getAttribute(pe);if(a)return{id:a,type:e.getAttribute(Ve)||"",element:e};e=e.parentNode}return null},ct=(e,a)=>{const o=a.dataItem.color,s=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:o}}," "),e.props.children);return t.cloneElement(e,e.props,s)},ut=(e,a)=>{if(!a)return e;const o=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:a.color}}," "),t.createElement("span",null,"  ",e.props.children));return t.cloneElement(e,{...e.props},o)},re=e=>t.createElement(t.Fragment,null,t.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:I.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[Ve]:oe,[pe]:e.task.id,tabIndex:e.tabIndex},t.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}),t.createElement(e.cardBody,{task:e.task},e.task.description)),e.showDeleteConfirm&&t.createElement(e.confirmDialog,{onConfirm:e.onTaskDelete,onClose:e.onCloseConfirmDialog,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}),e.showTaskPreviewPane&&t.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}));re.displayName="KendoReactTaskBoardCard";const le=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(S.Button,{icon:"x",svgIcon:A.xIcon,fillMode:"flat",onClick:e.onClose}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("div",{role:"form","data-role":"form",className:"k-form"},t.createElement(be.FieldWrapper,null,t.createElement(he.Label,{editorId:"title"},e.titleLabel),t.createElement(De.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),t.createElement(be.FieldWrapper,null,t.createElement(he.Label,{editorId:"description"},e.descriptionLabel),t.createElement(De.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),t.createElement(be.FieldWrapper,null,t.createElement(he.Label,{editorId:"priority"},e.priorityLabel),t.createElement(ot.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:ct,valueRender:ut,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(S.Button,{onClick:e.onClose},e.cancelButton),t.createElement(S.Button,{themeColor:"primary",onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));le.propTypes={},le.displayName="KendoReactTaskBoardEditPane";const Ce=e=>t.createElement(t.Fragment,null,t.createElement("div",{ref:e.elementRef,style:e.style,className:I.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[Ve]:X,[pe]:e.column.id},t.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}),t.createElement(e.body,null,e.children)),e.showAddCard&&t.createElement(e.addCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskCreate,priorities:e.priorities,editPane:le}),e.showEditCard&&e.editedTask&&t.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:le}),e.showColumnConfirmDelete&&t.createElement(e.confirmDialog,{onClose:e.onColumnDelete,onConfirm:e.onColumnConfirmDelete,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}));Ce.displayName="KendoReactTaskBoardColumn";const Ze=t.forwardRef((e,a)=>{I.validatePackage(rt);const{columnData:o=[],className:s,style:T,id:u,taskData:c=[],onChange:m}=e,l=t.useRef(null),h=t.useRef(null);t.useImperativeHandle(l,()=>({props:e})),t.useImperativeHandle(a,()=>l.current);const b=t.Children.toArray(e.children).filter(n=>n&&n.type&&n.type.displayName==="KendoReactTaskBoardToolbar"),L=t.useRef(null),C=t.useRef(null),B=t.useRef(null),[N,K]=t.useState(null),[R,v]=t.useState(null),[q,_]=t.useState({top:0,left:0}),O=t.useRef(null),W=t.useRef(null),H=t.useMemo(()=>{const n={};return(N||c).forEach(k=>{const d=k.status;n[d]||(n[d]=[]),n[d].push(k)}),n},[c,N]),V=t.useCallback(n=>{const k=n.originalEvent.target;if(k.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const d=at(k),E=h.current;if(d&&E){const y=d.type===X;if(y&&!k.closest(".k-taskboard-column-header"))return;const G=d.element.getBoundingClientRect(),Y=E.getBoundingClientRect();B.current={x:n.clientX-G.left+Y.left,y:n.clientY-G.top+Y.top};const M=y?o:c,fe=y?v:K,x=M.findIndex(Te=>String(Te.id)===d.id),F=M[x];if(x===-1||F.edit)return;const P=I.clone(F);P.isPlaceholder=!0;const U=[...M];U[x]=P,C.current={...d,index:x,item:F,width:G.width,height:G.height},_({top:n.clientY-B.current.y,left:n.clientX-B.current.x}),fe(U)}},[o,c]),p=t.useCallback(n=>{const k=C.current,d=O.current&&O.current.element||W.current;if(k&&d){_({top:n.clientY-B.current.y,left:n.clientX-B.current.x}),d.style.visibility="hidden";const E=document.elementFromPoint(n.clientX,n.clientY);if(d.style.visibility="",E&&E.getAttribute(Ye))return;const y=E&&at(E);if(y){let z;const G=y.type===k.type,Y=k.type===X,M=(Y?R:N)||[],fe=Y?v:K;if(Y||G){if(z=dt(k.id,y.id,M),z){const x=M[z.dragIndex],F=M[z.dropIndex],P=I.clone(x);Y||(P.status=F.status);const U=[...M];U.splice(z.dragIndex,1),U.splice(z.dropIndex,0,P),k.index=z.dropIndex,fe(U)}}else{const x=M.findIndex(P=>String(P.id)===k.id),F=o.findIndex(P=>String(P.id)===y.id);if(x!==-1&&F!==-1){const P=M[x],Te=o[F].status;if(H[Te])return;P.status=Te;const Ee=[...M];Ee.splice(x,1),Ee.push(P),k.index=Ee.length-1,fe(Ee)}}}}},[R,N,o,H]),et=t.useCallback(()=>{const n=C.current;if(m&&n){const d=(n.type===X?R:N)||[],E=d[n.index];delete E.isPlaceholder;const y={data:d,type:n.type,previousItem:n.item,item:E};m.call(void 0,y)}C.current=null,B.current=null,K(null),v(null),_({top:0,left:0})},[R,N,m]);I.useDraggable(L,{onDragStart:V,onDrag:p,onDragEnd:et});const D=C.current,Be=t.useCallback(n=>{const d={data:[...c,n],type:oe,previousItem:null,item:n};m.call(void 0,d)},[m,c]),se=t.useCallback((n,k)=>{const d=c.slice(),E=c.indexOf(k);E!==-1&&d.splice(E,1,n);const y={data:d,type:oe,previousItem:k,item:n};m.call(void 0,y)},[m,c]),g=t.useCallback(n=>{const d={data:c.filter(E=>E!==n),type:oe,previousItem:n,item:null};m.call(void 0,d)},[m,c]),j=t.useCallback((n,k)=>{const d=o.slice(),E=d.indexOf(k);E!==-1&&(n?d.splice(E,1,n):d.splice(E,1));const y={data:d,type:X,previousItem:k,item:n};m.call(void 0,y)},[m,o]);return t.createElement("div",{id:u,style:T,ref:h,className:I.classNames("k-widget k-taskboard",s)},b,t.createElement("div",{className:"k-taskboard-content",style:D?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:L},(R||o).map(n=>t.createElement(ke,{key:n.id,tabIndex:e.tabIndex,column:n,tasks:H[n.status]||[],dragTargetRef:C,onTaskCreate:Be,onTaskEdit:se,onTaskDelete:g,onColumnChange:j,columnComponent:e.column||Ce,cardComponent:e.card||re,priorities:e.priorities})))),D&&D.type===oe&&t.createElement(ge,{elementRef:O,style:{position:"absolute",width:D.width,height:D.height,top:q.top,left:q.left,zIndex:10,borderLeftColor:D.item.priority?D.item.priority.color:D.item.color},task:D.item,dragTargetRef:C,cardComponent:e.card||re,onDeleteTask:I.noop,showEditPane:I.noop}),D&&D.type===X&&t.createElement(ke,{elementRef:W,style:{position:"absolute",width:D.width,height:D.height,top:q.top,left:q.left,zIndex:10},cardComponent:e.card||re,columnComponent:e.column||Ce,column:D.item,tasks:H[D.item.status],priorities:e.priorities,dragTargetRef:C,onTaskDelete:g,onColumnChange:j,onTaskEdit:se,onTaskCreate:Be}))});Ze.propTypes={columnData:w.array.isRequired,taskData:w.array.isRequired},Ze.displayName="KendoReactTaskBoard";const $e=e=>{const{className:a,style:o,children:s}=e;return t.createElement("div",{style:o,className:I.classNames("k-taskboard-header",a)},t.createElement("div",{className:"k-taskboard-toolbar k-toolbar"},s))};$e.propTypes={children:w.node},$e.displayName="KendoReactTaskBoardToolbar",r.TaskBoard=Ze,r.TaskBoardAddCard=me,r.TaskBoardCard=re,r.TaskBoardCardBody=Je,r.TaskBoardCardHeader=Ge,r.TaskBoardColumn=Ce,r.TaskBoardColumnBody=Xe,r.TaskBoardColumnHeader=Ue,r.TaskBoardConfirmDialog=ie,r.TaskBoardEditCard=ue,r.TaskBoardPreviewDialog=Qe,r.TaskBoardTaskEditPane=le,r.TaskBoardToolbar=$e,r.useTaskEditing=We,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
+(function(r,J){typeof exports=="object"&&typeof module!="undefined"?J(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")):typeof define=="function"&&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"],J):(r=typeof globalThis!="undefined"?globalThis:r||self,J(r.KendoReactTaskboard={},r.React,r.PropTypes,r.KendoReactCommon,r.KendoReactIntl,r.KendoReactButtons,r.KendoReactInputs,r.KendoSvgIcons,r.KendoReactDialogs,r.KendoReactLayout,r.KendoReactPopup,r.KendoReactDropdowns,r.KendoReactLabels,r.KendoReactForm))})(this,function(r,J,w,I,de,S,De,A,tt,ce,nt,ot,he,be){"use strict";"use client";function it(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,s.get?s:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const t=it(J),rt={name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},lt="taskBoard.toolbarAddColumnButton",st="taskBoard.toolbarSearchField",ye="taskBoard.editColumnButton",ve="taskBoard.addCardButton",we="taskBoard.deleteColumnButton",Se="taskBoard.editCardButton",Pe="taskBoard.deleteCardButton",Ie="taskBoard.deleteTaskDialogMessage",Le="taskBoard.deleteTaskDialogTitle",Ne="taskBoard.deleteTaskConfirmButton",Me="taskBoard.deleteTaskCancelButton",Re="taskBoard.addCardTitle",Q="taskBoard.addCardTitleLabel",Z="taskBoard.addCardDescriptionLabel",$="taskBoard.addCardPriorityLabel",xe="taskBoard.addCardCreateButton",Ae="taskBoard.deleteColumnDialogMessage",Ke="taskBoard.deleteColumnDialogTitle",qe="taskBoard.deleteColumnConfirmButton",Oe="taskBoard.deleteColumnCancelButton",He="taskBoard.editCardPaneTitle",je="taskBoard.editCardPaneSaveButton",ee="taskBoard.editPaneTitleLabel",te="taskBoard.editPaneDescriptionLabel",ae="taskBoard.editPanePriorityLabel",ne="taskBoard.editPaneCancelButton",ze="taskBoard.previewPanePriorityLabel",Fe="taskBoard.previewPaneDeleteButton",_e="taskBoard.previewPaneEditButton",i={[lt]:"Add column",[st]:"Search",[ye]:"Edit column",[ve]:"Add card",[we]:"Delete column",[Se]:"Edit card",[Pe]:"Delete card",[Ie]:"Are you sure you want to delete this card?",[Le]:"Delete Card",[Ne]:"Delete",[Me]:"Cancel",[Ae]:"Are you sure you want to delete this column?",[Ke]:"Delete column?",[qe]:"Delete",[Oe]:"Cancel",[Re]:"Create new card",[xe]:"Create",[ne]:"Cancel",[He]:"Edit",[je]:"Save changes",[ee]:"Title:",[te]:"Description:",[ae]:"Priority:",[Q]:"Title",[Z]:"Description",[$]:"Priority",[ze]:"Priority:",[Fe]:"Delete",[_e]:"Edit"},Ve="data-taskboard-type",pe="data-taskboard-id",Ye="data-taskboard-placeholder",X="column",oe="task",Ue=e=>{const{edit:a,title:o}=e.column;return t.createElement("div",{className:"k-taskboard-column-header"},t.createElement("div",{className:"k-taskboard-column-header-text k-text-ellipsis"},a?t.createElement(De.Input,{value:o,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):o),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:I.classNames("k-taskboard-column-header-actions",{"k-disabled":a})},t.createElement(S.Button,{fillMode:"flat",icon:"pencil",svgIcon:A.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),t.createElement(S.Button,{fillMode:"flat",icon:"plus",svgIcon:A.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),t.createElement(S.Button,{fillMode:"flat",icon:"x",svgIcon:A.xIcon,title:e.closeButtonTitle,onClick:e.onColumnDelete})))};Ue.displayName="KendoReactTaskBoardColumnHeader";const Xe=e=>t.createElement("div",{className:"k-taskboard-column-cards-container"},t.createElement("div",{className:"k-taskboard-column-cards"},e.children));Xe.displayName="KendoReactTaskBoardColumnBody";const ie=e=>{const{onClose:a,onConfirm:o,dialogMessage:s,dialogTitle:T,dialogConfirmButton:u,dialogCancelButton:c}=e;return t.createElement(tt.Dialog,{title:T,closeIcon:!1},s,t.createElement(tt.DialogActionsBar,{layout:"end"},t.createElement(S.Button,{themeColor:"primary",onClick:o},u),t.createElement(S.Button,{onClick:a},c)))};ie.propTypes={onClose:w.func.isRequired,onConfirm:w.func.isRequired,dialogMessage:w.string.isRequired,dialogTitle:w.string.isRequired,dialogConfirmButton:w.string.isRequired,dialogCancelButton:w.string.isRequired},ie.displayName="KendoReactTaskBoardConfirmDialog";const We=({onSave:e,task:a,priorities:o})=>{const[s,T]=t.useState(a?a.title:""),[u,c]=t.useState(a?a.description:""),[m,l]=t.useState(a?a.priority:o[0]),h=t.useCallback(C=>{T(C.value)},[]),f=t.useCallback(C=>{c(C.value)},[]),b=t.useCallback(C=>{l(C.target.value)},[]),L=t.useCallback(C=>{const B={id:void 0,status:"",...a||{},title:s,description:u,priority:m};e.call(void 0,B,a)},[e,a,s,u,m]);return{onTitleChange:h,title:s,onDescriptionChange:f,description:u,onPriorityChange:b,priority:m,onSave:L}},ue=e=>{const{onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c,onSave:m}=We(e),l=de.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(He,i[He])+e.task.title,titleInputTitle:l.toLanguageString(Q,i[Q]),descriptionInputTitle:l.toLanguageString(Z,i[Z]),priorityDropDownTitle:l.toLanguageString($,i[$]),task:e.task,saveButton:l.toLanguageString(je,i[je]),cancelButton:l.toLanguageString(ne,i[ne]),priorities:e.priorities,titleLabel:l.toLanguageString(ee,i[ee]),descriptionLabel:l.toLanguageString(te,i[te]),priorityLabel:l.toLanguageString(ae,i[ae]),onSave:m,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c})};ue.propTypes={},ue.displayName="KendoReactTaskBoardEditCard";const me=e=>{const{onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c,onSave:m}=We(e),l=de.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Re,i[Re]),titleInputTitle:l.toLanguageString(Q,i[Q]),descriptionInputTitle:l.toLanguageString(Z,i[Z]),priorityDropDownTitle:l.toLanguageString($,i[$]),titleLabel:l.toLanguageString(ee,i[ee]),descriptionLabel:l.toLanguageString(te,i[te]),priorityLabel:l.toLanguageString(ae,i[ae]),saveButton:l.toLanguageString(xe,i[xe]),cancelButton:l.toLanguageString(ne,i[ne]),priorities:e.priorities,onSave:m,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c})};me.propTypes={},me.displayName="KendoReactTaskBoardAddCard";const Ge=e=>{const a=t.useRef();return t.createElement(ce.CardHeader,{className:"k-hbox"},t.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-card-header-actions"},t.createElement(S.Button,{fillMode:"flat",icon:"more-vertical",svgIcon:A.moreVerticalIcon,ref:a,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(nt.Popup,{anchor:a.current&&a.current.element,show:e.showMenu,ref:e.popupRef},t.createElement(ce.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};Ge.displayName="KendoReactTaskBoardCardHeader";const Je=e=>t.createElement(ce.CardBody,null,e.children);Je.displayName="KendoReactTaskBoardCardBody";const Qe=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(S.Button,{icon:"x",svgIcon:A.xIcon,fillMode:"flat",onClick:e.onClosePreviewPane}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("p",null,e.description),t.createElement("p",null,e.priorityLabel," ",t.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(S.Button,{onClick:e.onTaskDelete},e.delete),t.createElement(S.Button,{themeColor:"primary",onClick:e.onTaskEdit},e.edit)));Qe.displayName="KendoReactTaskBoardPreviewDialog";const ge=e=>{const{onDeleteTask:a,showEditPane:o,task:s,style:T,dragTargetRef:u,elementRef:c}=e,[m,l]=t.useState(!1),[h,f]=t.useState(!1),[b,L]=t.useState(!1),C=t.useRef(null),B=de.useLocalization(),N=[{text:B.toLanguageString(Se,i[Se]),icon:"pencil",svgIcon:A.pencilIcon,data:()=>{o(s),l(!m)}},{text:B.toLanguageString(Pe,i[Pe]),icon:"trash",svgIcon:A.trashIcon,data:()=>{f(!h),l(!m)}}],K=V=>{V.item.data()},R=()=>{l(!0)},v=()=>{l(!1)},q=V=>{const p=C.current&&C.current.element;p&&p.contains(V.relatedTarget)||l(!1)},_=()=>{f(!h)},O=()=>{L(!0)},W=()=>{L(!1)},H=()=>{o(s),O()};return s.isPlaceholder&&u&&u.current?t.createElement("div",{style:{width:u.current.width,height:u.current.height},className:"k-taskboard-drag-placeholder",[Ye]:!0}):t.createElement(e.cardComponent,{task:s,style:T,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:c,showMenu:m,showDeleteConfirm:h,showTaskPreviewPane:b,menuItems:N,popupRef:C,confirmDialogMessage:B.toLanguageString(Ie,i[Ie]),confirmDialogTitle:B.toLanguageString(Le,i[Le]),confirmDialogConfirmButton:B.toLanguageString(Ne,i[Ne]),confirmDialogCancelButton:B.toLanguageString(Me,i[Me]),previewDialogPriorityLabel:B.toLanguageString(ze,i[ze]),previewDialogDelete:B.toLanguageString(Fe,i[Fe]),previewDialogEdit:B.toLanguageString(_e,i[_e]),onShowPreviewPane:O,onClosePreviewPane:W,onMenuItemSelect:K,onShowMenu:R,onHideMenu:v,onMenuButtonBlur:q,onTaskDelete:a,onTaskEdit:H,onCloseConfirmDialog:_,card:ce.Card,cardHeader:Ge,cardBody:Je,confirmDialog:ie,previewDialog:Qe})};ge.propTypes={task:w.object.isRequired},ge.displayName="KendoReactTaskBoardCardBase";const ke=e=>{const[a,o]=t.useState(!1),[s,T]=t.useState(!1),[u,c]=t.useState(!1),[m,l]=t.useState(),{dragTargetRef:h,column:f,onColumnChange:b,tasks:L,elementRef:C,style:B,onTaskCreate:N,onTaskEdit:K,onTaskDelete:R}=e,v=de.useLocalization(),q=t.useCallback(g=>{const j={...f,title:g.value};b.call(void 0,j,f)},[f,b]),_=t.useCallback(()=>{const g={...f,edit:!0};b.call(void 0,g,f)},[f,b]),O=t.useCallback(()=>{const g={...f,edit:!1};b.call(void 0,g,f)},[f,b]),W=t.useCallback(()=>{b.call(void 0,null,f)},[f,b]),H=()=>{c(!u)},V=()=>{o(!0)},p=g=>{T(!0),l(g)},et=()=>{o(!1),T(!1)},D=t.useCallback(g=>{o(!1),N.call(void 0,{...g,status:f.status})},[N,f]),Be=t.useCallback((g,j)=>{T(!1),K.call(void 0,g,j)},[K]),se=t.useCallback(g=>{R.call(void 0,g)},[R]);if(f.isPlaceholder&&h&&h.current){const g=h.current?h.current.width:0,j=h.current?h.current.height:0;return t.createElement("div",{style:{width:g,height:j},className:"k-taskboard-column k-taskboard-drag-placeholder",[Ye]:!0})}return t.createElement(e.columnComponent,{column:e.column,tasks:L,priorities:e.priorities,style:h?{overflow:"visible",...B}:B,tabIndex:e.tabIndex,elementRef:C,onTaskCreate:D,onTaskEdit:Be,onTaskDelete:se,card:e.cardComponent,header:Ue,body:Xe,confirmDialog:ie,editCardDialog:ue,addCardDialog:me,onTitleChange:q,onColumnEnterEdit:_,onColumnExitEdit:O,onColumnConfirmDelete:W,onShowAddCardDialog:V,onShowEditCardPane:p,onColumnDelete:H,onCloseDialog:et,showAddCard:a,showEditCard:s,showColumnConfirmDelete:u,editedTask:m,confirmDialogMessage:v.toLanguageString(Ae,i[Ae]),confirmDialogTitle:v.toLanguageString(Ke,i[Ke]),confirmDialogConfirmButton:v.toLanguageString(qe,i[qe]),confirmDialogCancelButton:v.toLanguageString(Oe,i[Oe]),editButtonTitle:v.toLanguageString(ye,i[ye]),addButtonTitle:v.toLanguageString(ve,i[ve]),closeButtonTitle:v.toLanguageString(we,i[we])},L&&L.map(g=>t.createElement(ge,{key:g.id,tabIndex:e.tabIndex,task:g,disabled:!!e.column.edit,onDeleteTask:()=>se(g),showEditPane:()=>p(g),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:g.priority.color},cardComponent:e.cardComponent})))};ke.propTypes={column:w.object.isRequired,taskMap:w.object},ke.displayName="KendoReactTaskBoardColumn";const dt=(e,a,o)=>{let s=-1,T=-1;for(let u=0;u<o.length;u++){const c=String(o[u].id);if(c===e&&(T=u),c===a&&(s=u),s!==-1&&T!==-1)return{dragIndex:T,dropIndex:s}}return null},at=e=>{for(;e;){if(!e.getAttribute)return null;const a=e.getAttribute(pe);if(a)return{id:a,type:e.getAttribute(Ve)||"",element:e};e=e.parentNode}return null},ct=(e,a)=>{const o=a.dataItem.color,s=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:o}}," "),e.props.children);return t.cloneElement(e,e.props,s)},ut=(e,a)=>{if(!a)return e;const o=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:a.color}}," "),t.createElement("span",null,"  ",e.props.children));return t.cloneElement(e,{...e.props},o)},re=e=>t.createElement(t.Fragment,null,t.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:I.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[Ve]:oe,[pe]:e.task.id,tabIndex:e.tabIndex},t.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}),t.createElement(e.cardBody,{task:e.task},e.task.description)),e.showDeleteConfirm&&t.createElement(e.confirmDialog,{onConfirm:e.onTaskDelete,onClose:e.onCloseConfirmDialog,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}),e.showTaskPreviewPane&&t.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}));re.displayName="KendoReactTaskBoardCard";const le=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(S.Button,{icon:"x",svgIcon:A.xIcon,fillMode:"flat",onClick:e.onClose}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("div",{role:"form","data-role":"form",className:"k-form"},t.createElement(be.FieldWrapper,null,t.createElement(he.Label,{editorId:"title"},e.titleLabel),t.createElement(De.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),t.createElement(be.FieldWrapper,null,t.createElement(he.Label,{editorId:"description"},e.descriptionLabel),t.createElement(De.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),t.createElement(be.FieldWrapper,null,t.createElement(he.Label,{editorId:"priority"},e.priorityLabel),t.createElement(ot.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:ct,valueRender:ut,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(S.Button,{onClick:e.onClose},e.cancelButton),t.createElement(S.Button,{themeColor:"primary",onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));le.propTypes={},le.displayName="KendoReactTaskBoardEditPane";const Ce=e=>t.createElement(t.Fragment,null,t.createElement("div",{ref:e.elementRef,style:e.style,className:I.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[Ve]:X,[pe]:e.column.id},t.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}),t.createElement(e.body,null,e.children)),e.showAddCard&&t.createElement(e.addCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskCreate,priorities:e.priorities,editPane:le}),e.showEditCard&&e.editedTask&&t.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:le}),e.showColumnConfirmDelete&&t.createElement(e.confirmDialog,{onClose:e.onColumnDelete,onConfirm:e.onColumnConfirmDelete,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}));Ce.displayName="KendoReactTaskBoardColumn";const Ze=t.forwardRef((e,a)=>{I.validatePackage(rt);const{columnData:o=[],className:s,style:T,id:u,taskData:c=[],onChange:m}=e,l=t.useRef(null),h=t.useRef(null);t.useImperativeHandle(l,()=>({props:e})),t.useImperativeHandle(a,()=>l.current);const b=t.Children.toArray(e.children).filter(n=>n&&n.type&&n.type.displayName==="KendoReactTaskBoardToolbar"),L=t.useRef(null),C=t.useRef(null),B=t.useRef(null),[N,K]=t.useState(null),[R,v]=t.useState(null),[q,_]=t.useState({top:0,left:0}),O=t.useRef(null),W=t.useRef(null),H=t.useMemo(()=>{const n={};return(N||c).forEach(k=>{const d=k.status;n[d]||(n[d]=[]),n[d].push(k)}),n},[c,N]),V=t.useCallback(n=>{const k=n.originalEvent.target;if(k.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const d=at(k),E=h.current;if(d&&E){const y=d.type===X;if(y&&!k.closest(".k-taskboard-column-header"))return;const G=d.element.getBoundingClientRect(),Y=E.getBoundingClientRect();B.current={x:n.clientX-G.left+Y.left,y:n.clientY-G.top+Y.top};const M=y?o:c,fe=y?v:K,x=M.findIndex(Te=>String(Te.id)===d.id),F=M[x];if(x===-1||F.edit)return;const P=I.clone(F);P.isPlaceholder=!0;const U=[...M];U[x]=P,C.current={...d,index:x,item:F,width:G.width,height:G.height},_({top:n.clientY-B.current.y,left:n.clientX-B.current.x}),fe(U)}},[o,c]),p=t.useCallback(n=>{const k=C.current,d=O.current&&O.current.element||W.current;if(k&&d){_({top:n.clientY-B.current.y,left:n.clientX-B.current.x}),d.style.visibility="hidden";const E=document.elementFromPoint(n.clientX,n.clientY);if(d.style.visibility="",E&&E.getAttribute(Ye))return;const y=E&&at(E);if(y){let z;const G=y.type===k.type,Y=k.type===X,M=(Y?R:N)||[],fe=Y?v:K;if(Y||G){if(z=dt(k.id,y.id,M),z){const x=M[z.dragIndex],F=M[z.dropIndex],P=I.clone(x);Y||(P.status=F.status);const U=[...M];U.splice(z.dragIndex,1),U.splice(z.dropIndex,0,P),k.index=z.dropIndex,fe(U)}}else{const x=M.findIndex(P=>String(P.id)===k.id),F=o.findIndex(P=>String(P.id)===y.id);if(x!==-1&&F!==-1){const P=M[x],Te=o[F].status;if(H[Te])return;P.status=Te;const Ee=[...M];Ee.splice(x,1),Ee.push(P),k.index=Ee.length-1,fe(Ee)}}}}},[R,N,o,H]),et=t.useCallback(()=>{const n=C.current;if(m&&n){const d=(n.type===X?R:N)||[],E=d[n.index];delete E.isPlaceholder;const y={data:d,type:n.type,previousItem:n.item,item:E};m.call(void 0,y)}C.current=null,B.current=null,K(null),v(null),_({top:0,left:0})},[R,N,m]);I.useDraggable(L,{onDragStart:V,onDrag:p,onDragEnd:et});const D=C.current,Be=t.useCallback(n=>{const d={data:[...c,n],type:oe,previousItem:null,item:n};m.call(void 0,d)},[m,c]),se=t.useCallback((n,k)=>{const d=c.slice(),E=c.indexOf(k);E!==-1&&d.splice(E,1,n);const y={data:d,type:oe,previousItem:k,item:n};m.call(void 0,y)},[m,c]),g=t.useCallback(n=>{const d={data:c.filter(E=>E!==n),type:oe,previousItem:n,item:null};m.call(void 0,d)},[m,c]),j=t.useCallback((n,k)=>{const d=o.slice(),E=d.indexOf(k);E!==-1&&(n?d.splice(E,1,n):d.splice(E,1));const y={data:d,type:X,previousItem:k,item:n};m.call(void 0,y)},[m,o]);return t.createElement("div",{id:u,style:T,ref:h,className:I.classNames("k-widget k-taskboard",s)},b,t.createElement("div",{className:"k-taskboard-content",style:D?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:L},(R||o).map(n=>t.createElement(ke,{key:n.id,tabIndex:e.tabIndex,column:n,tasks:H[n.status]||[],dragTargetRef:C,onTaskCreate:Be,onTaskEdit:se,onTaskDelete:g,onColumnChange:j,columnComponent:e.column||Ce,cardComponent:e.card||re,priorities:e.priorities})))),D&&D.type===oe&&t.createElement(ge,{elementRef:O,style:{position:"absolute",width:D.width,height:D.height,top:q.top,left:q.left,zIndex:10,borderLeftColor:D.item.priority?D.item.priority.color:D.item.color},task:D.item,dragTargetRef:C,cardComponent:e.card||re,onDeleteTask:I.noop,showEditPane:I.noop}),D&&D.type===X&&t.createElement(ke,{elementRef:W,style:{position:"absolute",width:D.width,height:D.height,top:q.top,left:q.left,zIndex:10},cardComponent:e.card||re,columnComponent:e.column||Ce,column:D.item,tasks:H[D.item.status],priorities:e.priorities,dragTargetRef:C,onTaskDelete:g,onColumnChange:j,onTaskEdit:se,onTaskCreate:Be}))});Ze.propTypes={columnData:w.array.isRequired,taskData:w.array.isRequired},Ze.displayName="KendoReactTaskBoard";const $e=e=>{const{className:a,style:o,children:s}=e;return t.createElement("div",{style:o,className:I.classNames("k-taskboard-header",a)},t.createElement("div",{className:"k-taskboard-toolbar k-toolbar"},s))};$e.propTypes={children:w.node},$e.displayName="KendoReactTaskBoardToolbar",r.TaskBoard=Ze,r.TaskBoardAddCard=me,r.TaskBoardCard=re,r.TaskBoardCardBody=Je,r.TaskBoardCardHeader=Ge,r.TaskBoardColumn=Ce,r.TaskBoardColumnBody=Xe,r.TaskBoardColumnHeader=Ue,r.TaskBoardConfirmDialog=ie,r.TaskBoardEditCard=ue,r.TaskBoardPreviewDialog=Qe,r.TaskBoardTaskEditPane=le,r.TaskBoardToolbar=$e,r.useTaskEditing=We,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/index.mjs

@@ -20,7 +20,7 @@ const Ct = {
   name: "@progress/kendo-react-taskboard",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1704454239,
+  publishDate: 1706107116,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 }, ft = "taskBoard.toolbarAddColumnButton", Bt = "taskBoard.toolbarSearchField", Be = "taskBoard.editColumnButton", Te = "taskBoard.addCardButton", Ee = "taskBoard.deleteColumnButton", De = "taskBoard.editCardButton", he = "taskBoard.deleteCardButton", be = "taskBoard.deleteTaskDialogMessage", ye = "taskBoard.deleteTaskDialogTitle", ve = "taskBoard.deleteTaskConfirmButton", Se = "taskBoard.deleteTaskCancelButton", we = "taskBoard.addCardTitle", J = "taskBoard.addCardTitleLabel", Q = "taskBoard.addCardDescriptionLabel", Z = "taskBoard.addCardPriorityLabel", Pe = "taskBoard.addCardCreateButton", Ie = "taskBoard.deleteColumnDialogMessage", Re = "taskBoard.deleteColumnDialogTitle", Le = "taskBoard.deleteColumnConfirmButton", Ne = "taskBoard.deleteColumnCancelButton", xe = "taskBoard.editCardPaneTitle", Me = "taskBoard.editCardPaneSaveButton", $ = "taskBoard.editPaneTitleLabel", p = "taskBoard.editPaneDescriptionLabel", ee = "taskBoard.editPanePriorityLabel", te = "taskBoard.editPaneCancelButton", Ae = "taskBoard.previewPanePriorityLabel", Ke = "taskBoard.previewPaneDeleteButton", He = "taskBoard.previewPaneEditButton", i = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-taskboard",
-  "version": "7.0.3-develop.9",
+  "version": "7.1.0-develop.10",
   "description": "KendoReact TaskBoard package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -24,17 +24,17 @@
   "peerDependencies": {
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-buttons": "7.0.3-develop.9",
-    "@progress/kendo-react-common": "7.0.3-develop.9",
-    "@progress/kendo-react-dialogs": "7.0.3-develop.9",
-    "@progress/kendo-react-dropdowns": "7.0.3-develop.9",
-    "@progress/kendo-react-form": "7.0.3-develop.9",
-    "@progress/kendo-react-indicators": "7.0.3-develop.9",
-    "@progress/kendo-react-inputs": "7.0.3-develop.9",
-    "@progress/kendo-react-intl": "7.0.3-develop.9",
-    "@progress/kendo-react-labels": "7.0.3-develop.9",
-    "@progress/kendo-react-layout": "7.0.3-develop.9",
-    "@progress/kendo-react-popup": "7.0.3-develop.9",
+    "@progress/kendo-react-buttons": "7.1.0-develop.10",
+    "@progress/kendo-react-common": "7.1.0-develop.10",
+    "@progress/kendo-react-dialogs": "7.1.0-develop.10",
+    "@progress/kendo-react-dropdowns": "7.1.0-develop.10",
+    "@progress/kendo-react-form": "7.1.0-develop.10",
+    "@progress/kendo-react-indicators": "7.1.0-develop.10",
+    "@progress/kendo-react-inputs": "7.1.0-develop.10",
+    "@progress/kendo-react-intl": "7.1.0-develop.10",
+    "@progress/kendo-react-labels": "7.1.0-develop.10",
+    "@progress/kendo-react-layout": "7.1.0-develop.10",
+    "@progress/kendo-react-popup": "7.1.0-develop.10",
     "@progress/kendo-svg-icons": "^2.1.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"