@progress/kendo-react-taskboard 7.2.4-develop.3 → 7.2.4-develop.4

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

@@ -1,5 +1,8 @@
-/**-----------------------------------------------------------------------------------------
-* 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!="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"})});
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+!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",y="taskBoard.addCardButton",h="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",[y]:"Add card",[h]:"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,{fillMode:"flat",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),y=n.useLocalization(),h=[{text:y.toLanguageString(b,Y[b]),icon:"pencil",svgIcon:l.pencilIcon,data:()=>{a(o),u(!c)}},{text:y.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:h,popupRef:f,confirmDialogMessage:y.toLanguageString(B,Y[B]),confirmDialogTitle:y.toLanguageString(T,Y[T]),confirmDialogConfirmButton:y.toLanguageString(v,Y[v]),confirmDialogCancelButton:y.toLanguageString(D,Y[D]),previewDialogPriorityLabel:y.toLanguageString(O,Y[O]),previewDialogDelete:y.toLanguageString(z,Y[z]),previewDialogEdit:y.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(y,Y[y]),closeButtonTitle:T.toLanguageString(h,Y[h])},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,y]=k.useState(null),[h,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:y,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?h:f)||[],s=r?b:y;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)}}}}}),[h,f,a,D]),I=k.useCallback((()=>{const e=p.current;if(s&&e){const t=(e.type===G?h: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,y(null),b(null),B({top:0,left:0})}),[h,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-widget 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},(h||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"},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/hooks/taskEditing.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react");function y(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,i.get?i:{enumerable:!0,get:()=>t[o]})}}return e.default=t,Object.freeze(e)}const n=y(v),S=({onSave:t,task:e,priorities:o})=>{const[i,a]=n.useState(e?e.title:""),[r,l]=n.useState(e?e.description:""),[s,u]=n.useState(e?e.priority:o[0]),d=n.useCallback(c=>{a(c.value)},[]),g=n.useCallback(c=>{l(c.value)},[]),p=n.useCallback(c=>{u(c.target.value)},[]),b=n.useCallback(c=>{const f={id:void 0,status:"",...e||{},title:i,description:r,priority:s};t.call(void 0,f,e)},[t,e,i,r,s]);return{onTitleChange:d,title:i,onDescriptionChange:g,description:r,onPriorityChange:p,priority:s,onSave:b}};exports.useTaskEditing=S;

package/hooks/taskEditing.mjs

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as t from "react";
+const b = ({ onSave: c, task: e, priorities: l }) => {
+  const [n, r] = t.useState(e ? e.title : ""), [o, a] = t.useState(e ? e.description : ""), [s, u] = t.useState(e ? e.priority : l[0]), p = t.useCallback((i) => {
+    r(i.value);
+  }, []), v = t.useCallback((i) => {
+    a(i.value);
+  }, []), C = t.useCallback((i) => {
+    u(i.target.value);
+  }, []), d = t.useCallback((i) => {
+    const g = { id: void 0, status: "", ...e || {}, title: n, description: o, priority: s };
+    c.call(void 0, g, e);
+  }, [c, e, n, o, s]);
+  return { onTitleChange: p, title: n, onDescriptionChange: v, description: o, onPriorityChange: C, priority: s, onSave: d };
+};
+export {
+  b as useTaskEditing
+};