@progress/kendo-react-taskboard 7.0.1 → 7.0.2-develop.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cdn/js/kendo-react-taskboard.js +1 -1
  2. package/index.d.mts +5 -0
  3. package/index.js +1 -1
  4. package/index.mjs +3 -4
  5. package/package.json +21 -15
package/dist/cdn/js/kendo-react-taskboard.js CHANGED
@@ -2,4 +2,4 @@
2
2
  * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the package root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- (function(r,J){typeof exports=="object"&&typeof module<"u"?J(exports,require("react"),require("prop-types"),require("@progress/kendo-licensing"),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-licensing","@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.KendoLicensing,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,ot,it,M,de,w,De,A,tt,ce,rt,lt,he,ye){"use strict";"use client";function at(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=at(J),S=at(ot),st={name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},dt="taskBoard.toolbarAddColumnButton",ct="taskBoard.toolbarSearchField",be="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",pe="taskBoard.deleteColumnConfirmButton",qe="taskBoard.deleteColumnCancelButton",Oe="taskBoard.editCardPaneTitle",He="taskBoard.editCardPaneSaveButton",ee="taskBoard.editPaneTitleLabel",te="taskBoard.editPaneDescriptionLabel",ae="taskBoard.editPanePriorityLabel",ne="taskBoard.editPaneCancelButton",_e="taskBoard.previewPanePriorityLabel",je="taskBoard.previewPaneDeleteButton",ze="taskBoard.previewPaneEditButton",i={[dt]:"Add column",[ct]:"Search",[be]:"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?",[pe]:"Delete",[qe]:"Cancel",[Re]:"Create new card",[xe]:"Create",[ne]:"Cancel",[Oe]:"Edit",[He]:"Save changes",[ee]:"Title:",[te]:"Description:",[ae]:"Priority:",[Q]:"Title",[Z]:"Description",[$]:"Priority",[_e]:"Priority:",[je]:"Delete",[ze]:"Edit"},Fe="data-taskboard-type",Ve="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:M.classNames("k-taskboard-column-header-actions",{"k-disabled":a})},t.createElement(w.Button,{fillMode:"flat",icon:"pencil",svgIcon:A.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),t.createElement(w.Button,{fillMode:"flat",icon:"plus",svgIcon:A.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),t.createElement(w.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(w.Button,{themeColor:"primary",onClick:o},u),t.createElement(w.Button,{onClick:a},c)))};ie.propTypes={onClose:S.func.isRequired,onConfirm:S.func.isRequired,dialogMessage:S.string.isRequired,dialogTitle:S.string.isRequired,dialogConfirmButton:S.string.isRequired,dialogCancelButton:S.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)},[]),y=t.useCallback(C=>{l(C.target.value)},[]),I=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:y,priority:m,onSave:I}},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(Oe,i[Oe])+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(He,i[He]),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(w.Button,{fillMode:"flat",icon:"more-vertical",svgIcon:A.moreVerticalIcon,ref:a,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(rt.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(w.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(w.Button,{onClick:e.onTaskDelete},e.delete),t.createElement(w.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),[y,I]=t.useState(!1),C=t.useRef(null),B=de.useLocalization(),L=[{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=F=>{F.item.data()},R=()=>{l(!0)},v=()=>{l(!1)},p=F=>{const V=C.current&&C.current.element;V&&V.contains(F.relatedTarget)||l(!1)},z=()=>{f(!h)},q=()=>{I(!0)},W=()=>{I(!1)},O=()=>{o(s),q()};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:y,menuItems:L,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(_e,i[_e]),previewDialogDelete:B.toLanguageString(je,i[je]),previewDialogEdit:B.toLanguageString(ze,i[ze]),onShowPreviewPane:q,onClosePreviewPane:W,onMenuItemSelect:K,onShowMenu:R,onHideMenu:v,onMenuButtonBlur:p,onTaskDelete:a,onTaskEdit:O,onCloseConfirmDialog:z,card:ce.Card,cardHeader:Ge,cardBody:Je,confirmDialog:ie,previewDialog:Qe})};ge.propTypes={task:S.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:y,tasks:I,elementRef:C,style:B,onTaskCreate:L,onTaskEdit:K,onTaskDelete:R}=e,v=de.useLocalization(),p=t.useCallback(g=>{const H={...f,title:g.value};y.call(void 0,H,f)},[f,y]),z=t.useCallback(()=>{const g={...f,edit:!0};y.call(void 0,g,f)},[f,y]),q=t.useCallback(()=>{const g={...f,edit:!1};y.call(void 0,g,f)},[f,y]),W=t.useCallback(()=>{y.call(void 0,null,f)},[f,y]),O=()=>{c(!u)},F=()=>{o(!0)},V=g=>{T(!0),l(g)},et=()=>{o(!1),T(!1)},D=t.useCallback(g=>{o(!1),L.call(void 0,{...g,status:f.status})},[L,f]),Be=t.useCallback((g,H)=>{T(!1),K.call(void 0,g,H)},[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,H=h.current?h.current.height:0;return t.createElement("div",{style:{width:g,height:H},className:"k-taskboard-column k-taskboard-drag-placeholder",[Ye]:!0})}return t.createElement(e.columnComponent,{column:e.column,tasks:I,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:p,onColumnEnterEdit:z,onColumnExitEdit:q,onColumnConfirmDelete:W,onShowAddCardDialog:F,onShowEditCardPane:V,onColumnDelete:O,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(pe,i[pe]),confirmDialogCancelButton:v.toLanguageString(qe,i[qe]),editButtonTitle:v.toLanguageString(be,i[be]),addButtonTitle:v.toLanguageString(ve,i[ve]),closeButtonTitle:v.toLanguageString(we,i[we])},I&&I.map(g=>t.createElement(ge,{key:g.id,tabIndex:e.tabIndex,task:g,disabled:!!e.column.edit,onDeleteTask:()=>se(g),showEditPane:()=>V(g),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:g.priority.color},cardComponent:e.cardComponent})))};ke.propTypes={column:S.object.isRequired,taskMap:S.object},ke.displayName="KendoReactTaskBoardColumn";const ut=(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},nt=e=>{for(;e;){if(!e.getAttribute)return null;const a=e.getAttribute(Ve);if(a)return{id:a,type:e.getAttribute(Fe)||"",element:e};e=e.parentNode}return null},mt=(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)},gt=(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:M.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[Fe]:oe,[Ve]: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(w.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(ye.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(ye.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(ye.FieldWrapper,null,t.createElement(he.Label,{editorId:"priority"},e.priorityLabel),t.createElement(lt.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:mt,valueRender:gt,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(w.Button,{onClick:e.onClose},e.cancelButton),t.createElement(w.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:M.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[Fe]:X,[Ve]: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)=>{it.validatePackage(st);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 y=t.Children.toArray(e.children).filter(n=>n&&n.type&&n.type.displayName==="KendoReactTaskBoardToolbar"),I=t.useRef(null),C=t.useRef(null),B=t.useRef(null),[L,K]=t.useState(null),[R,v]=t.useState(null),[p,z]=t.useState({top:0,left:0}),q=t.useRef(null),W=t.useRef(null),O=t.useMemo(()=>{const n={};return(L||c).forEach(k=>{const d=k.status;n[d]||(n[d]=[]),n[d].push(k)}),n},[c,L]),F=t.useCallback(n=>{const k=n.originalEvent.target;if(k.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const d=nt(k),E=h.current;if(d&&E){const b=d.type===X;if(b&&!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 N=b?o:c,fe=b?v:K,x=N.findIndex(Te=>String(Te.id)===d.id),j=N[x];if(x===-1||j.edit)return;const P=M.clone(j);P.isPlaceholder=!0;const U=[...N];U[x]=P,C.current={...d,index:x,item:j,width:G.width,height:G.height},z({top:n.clientY-B.current.y,left:n.clientX-B.current.x}),fe(U)}},[o,c]),V=t.useCallback(n=>{const k=C.current,d=q.current&&q.current.element||W.current;if(k&&d){z({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 b=E&&nt(E);if(b){let _;const G=b.type===k.type,Y=k.type===X,N=(Y?R:L)||[],fe=Y?v:K;if(Y||G){if(_=ut(k.id,b.id,N),_){const x=N[_.dragIndex],j=N[_.dropIndex],P=M.clone(x);Y||(P.status=j.status);const U=[...N];U.splice(_.dragIndex,1),U.splice(_.dropIndex,0,P),k.index=_.dropIndex,fe(U)}}else{const x=N.findIndex(P=>String(P.id)===k.id),j=o.findIndex(P=>String(P.id)===b.id);if(x!==-1&&j!==-1){const P=N[x],Te=o[j].status;if(O[Te])return;P.status=Te;const Ee=[...N];Ee.splice(x,1),Ee.push(P),k.index=Ee.length-1,fe(Ee)}}}}},[R,L,o,O]),et=t.useCallback(()=>{const n=C.current;if(m&&n){const d=(n.type===X?R:L)||[],E=d[n.index];delete E.isPlaceholder;const b={data:d,type:n.type,previousItem:n.item,item:E};m.call(void 0,b)}C.current=null,B.current=null,K(null),v(null),z({top:0,left:0})},[R,L,m]);M.useDraggable(I,{onDragStart:F,onDrag:V,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 b={data:d,type:oe,previousItem:k,item:n};m.call(void 0,b)},[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]),H=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 b={data:d,type:X,previousItem:k,item:n};m.call(void 0,b)},[m,o]);return t.createElement("div",{id:u,style:T,ref:h,className:M.classNames("k-widget k-taskboard",s)},y,t.createElement("div",{className:"k-taskboard-content",style:D?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:I},(R||o).map(n=>t.createElement(ke,{key:n.id,tabIndex:e.tabIndex,column:n,tasks:O[n.status]||[],dragTargetRef:C,onTaskCreate:Be,onTaskEdit:se,onTaskDelete:g,onColumnChange:H,columnComponent:e.column||Ce,cardComponent:e.card||re,priorities:e.priorities})))),D&&D.type===oe&&t.createElement(ge,{elementRef:q,style:{position:"absolute",width:D.width,height:D.height,top:p.top,left:p.left,zIndex:10,borderLeftColor:D.item.priority?D.item.priority.color:D.item.color},task:D.item,dragTargetRef:C,cardComponent:e.card||re,onDeleteTask:M.noop,showEditPane:M.noop}),D&&D.type===X&&t.createElement(ke,{elementRef:W,style:{position:"absolute",width:D.width,height:D.height,top:p.top,left:p.left,zIndex:10},cardComponent:e.card||re,columnComponent:e.column||Ce,column:D.item,tasks:O[D.item.status],priorities:e.priorities,dragTargetRef:C,onTaskDelete:g,onColumnChange:H,onTaskEdit:se,onTaskCreate:Be}))});Ze.propTypes={columnData:S.array.isRequired,taskData:S.array.isRequired},Ze.displayName="KendoReactTaskBoard";const $e=e=>{const{className:a,style:o,children:s}=e;return t.createElement("div",{style:o,className:M.classNames("k-taskboard-header",a)},t.createElement("div",{className:"k-taskboard-toolbar k-toolbar"},s))};$e.propTypes={children:S.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"})});
5
+ (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"})});
package/index.d.mts ADDED
@@ -0,0 +1,5 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ export * from './index';
package/index.js CHANGED
@@ -2,4 +2,4 @@
2
2
  * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the package root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const at=require("react"),nt=require("prop-types"),ot=require("@progress/kendo-licensing"),x=require("@progress/kendo-react-common"),ge=require("@progress/kendo-react-intl"),w=require("@progress/kendo-react-buttons"),be=require("@progress/kendo-react-inputs"),_=require("@progress/kendo-svg-icons"),$e=require("@progress/kendo-react-dialogs"),ue=require("@progress/kendo-react-layout"),it=require("@progress/kendo-react-popup"),lt=require("@progress/kendo-react-dropdowns"),Ee=require("@progress/kendo-react-labels"),De=require("@progress/kendo-react-form");function tt(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const t=tt(at),S=tt(nt),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/"},st="taskBoard.toolbarAddColumnButton",dt="taskBoard.toolbarSearchField",he="taskBoard.editColumnButton",ye="taskBoard.addCardButton",ve="taskBoard.deleteColumnButton",Se="taskBoard.editCardButton",we="taskBoard.deleteCardButton",Pe="taskBoard.deleteTaskDialogMessage",Ie="taskBoard.deleteTaskDialogTitle",Re="taskBoard.deleteTaskConfirmButton",Le="taskBoard.deleteTaskCancelButton",Ne="taskBoard.addCardTitle",Z="taskBoard.addCardTitleLabel",$="taskBoard.addCardDescriptionLabel",ee="taskBoard.addCardPriorityLabel",xe="taskBoard.addCardCreateButton",Me="taskBoard.deleteColumnDialogMessage",Ae="taskBoard.deleteColumnDialogTitle",Ke="taskBoard.deleteColumnConfirmButton",qe="taskBoard.deleteColumnCancelButton",Oe="taskBoard.editCardPaneTitle",He="taskBoard.editCardPaneSaveButton",te="taskBoard.editPaneTitleLabel",ae="taskBoard.editPaneDescriptionLabel",ne="taskBoard.editPanePriorityLabel",oe="taskBoard.editPaneCancelButton",Fe="taskBoard.previewPanePriorityLabel",_e="taskBoard.previewPaneDeleteButton",ze="taskBoard.previewPaneEditButton",i={[st]:"Add column",[dt]:"Search",[he]:"Edit column",[ye]:"Add card",[ve]:"Delete column",[Se]:"Edit card",[we]:"Delete card",[Pe]:"Are you sure you want to delete this card?",[Ie]:"Delete Card",[Re]:"Delete",[Le]:"Cancel",[Me]:"Are you sure you want to delete this column?",[Ae]:"Delete column?",[Ke]:"Delete",[qe]:"Cancel",[Ne]:"Create new card",[xe]:"Create",[oe]:"Cancel",[Oe]:"Edit",[He]:"Save changes",[te]:"Title:",[ae]:"Description:",[ne]:"Priority:",[Z]:"Title",[$]:"Description",[ee]:"Priority",[Fe]:"Priority:",[_e]:"Delete",[ze]:"Edit"},je="data-taskboard-type",Ve="data-taskboard-id",Ye="data-taskboard-placeholder",p="column",J="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(be.Input,{value:o,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):o),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:x.classNames("k-taskboard-column-header-actions",{"k-disabled":a})},t.createElement(w.Button,{fillMode:"flat",icon:"pencil",svgIcon:_.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),t.createElement(w.Button,{fillMode:"flat",icon:"plus",svgIcon:_.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),t.createElement(w.Button,{fillMode:"flat",icon:"x",svgIcon:_.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 le=e=>{const{onClose:a,onConfirm:o,dialogMessage:r,dialogTitle:T,dialogConfirmButton:c,dialogCancelButton:d}=e;return t.createElement($e.Dialog,{title:T,closeIcon:!1},r,t.createElement($e.DialogActionsBar,{layout:"end"},t.createElement(w.Button,{themeColor:"primary",onClick:o},c),t.createElement(w.Button,{onClick:a},d)))};le.propTypes={onClose:S.func.isRequired,onConfirm:S.func.isRequired,dialogMessage:S.string.isRequired,dialogTitle:S.string.isRequired,dialogConfirmButton:S.string.isRequired,dialogCancelButton:S.string.isRequired};le.displayName="KendoReactTaskBoardConfirmDialog";const We=({onSave:e,task:a,priorities:o})=>{const[r,T]=t.useState(a?a.title:""),[c,d]=t.useState(a?a.description:""),[u,l]=t.useState(a?a.priority:o[0]),D=t.useCallback(g=>{T(g.value)},[]),B=t.useCallback(g=>{d(g.value)},[]),b=t.useCallback(g=>{l(g.target.value)},[]),P=t.useCallback(g=>{const C={id:void 0,status:"",...a||{},title:r,description:c,priority:u};e.call(void 0,C,a)},[e,a,r,c,u]);return{onTitleChange:D,title:r,onDescriptionChange:B,description:c,onPriorityChange:b,priority:u,onSave:P}},Ce=e=>{const{onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d,onSave:u}=We(e),l=ge.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Oe,i[Oe])+e.task.title,titleInputTitle:l.toLanguageString(Z,i[Z]),descriptionInputTitle:l.toLanguageString($,i[$]),priorityDropDownTitle:l.toLanguageString(ee,i[ee]),task:e.task,saveButton:l.toLanguageString(He,i[He]),cancelButton:l.toLanguageString(oe,i[oe]),priorities:e.priorities,titleLabel:l.toLanguageString(te,i[te]),descriptionLabel:l.toLanguageString(ae,i[ae]),priorityLabel:l.toLanguageString(ne,i[ne]),onSave:u,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d})};Ce.propTypes={};Ce.displayName="KendoReactTaskBoardEditCard";const Be=e=>{const{onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d,onSave:u}=We(e),l=ge.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Ne,i[Ne]),titleInputTitle:l.toLanguageString(Z,i[Z]),descriptionInputTitle:l.toLanguageString($,i[$]),priorityDropDownTitle:l.toLanguageString(ee,i[ee]),titleLabel:l.toLanguageString(te,i[te]),descriptionLabel:l.toLanguageString(ae,i[ae]),priorityLabel:l.toLanguageString(ne,i[ne]),saveButton:l.toLanguageString(xe,i[xe]),cancelButton:l.toLanguageString(oe,i[oe]),priorities:e.priorities,onSave:u,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d})};Be.propTypes={};Be.displayName="KendoReactTaskBoardAddCard";const pe=e=>{const a=t.useRef();return t.createElement(ue.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(w.Button,{fillMode:"flat",icon:"more-vertical",svgIcon:_.moreVerticalIcon,ref:a,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(it.Popup,{anchor:a.current&&a.current.element,show:e.showMenu,ref:e.popupRef},t.createElement(ue.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};pe.displayName="KendoReactTaskBoardCardHeader";const Ge=e=>t.createElement(ue.CardBody,null,e.children);Ge.displayName="KendoReactTaskBoardCardBody";const Je=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(w.Button,{icon:"x",svgIcon:_.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(w.Button,{onClick:e.onTaskDelete},e.delete),t.createElement(w.Button,{themeColor:"primary",onClick:e.onTaskEdit},e.edit)));Je.displayName="KendoReactTaskBoardPreviewDialog";const Te=e=>{const{onDeleteTask:a,showEditPane:o,task:r,style:T,dragTargetRef:c,elementRef:d}=e,[u,l]=t.useState(!1),[D,B]=t.useState(!1),[b,P]=t.useState(!1),g=t.useRef(null),C=ge.useLocalization(),I=[{text:C.toLanguageString(Se,i[Se]),icon:"pencil",svgIcon:_.pencilIcon,data:()=>{o(r),l(!u)}},{text:C.toLanguageString(we,i[we]),icon:"trash",svgIcon:_.trashIcon,data:()=>{B(!D),l(!u)}}],M=j=>{j.item.data()},L=()=>{l(!0)},y=()=>{l(!1)},A=j=>{const V=g.current&&g.current.element;V&&V.contains(j.relatedTarget)||l(!1)},z=()=>{B(!D)},K=()=>{P(!0)},X=()=>{P(!1)},q=()=>{o(r),K()};return r.isPlaceholder&&c&&c.current?t.createElement("div",{style:{width:c.current.width,height:c.current.height},className:"k-taskboard-drag-placeholder",[Ye]:!0}):t.createElement(e.cardComponent,{task:r,style:T,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:d,showMenu:u,showDeleteConfirm:D,showTaskPreviewPane:b,menuItems:I,popupRef:g,confirmDialogMessage:C.toLanguageString(Pe,i[Pe]),confirmDialogTitle:C.toLanguageString(Ie,i[Ie]),confirmDialogConfirmButton:C.toLanguageString(Re,i[Re]),confirmDialogCancelButton:C.toLanguageString(Le,i[Le]),previewDialogPriorityLabel:C.toLanguageString(Fe,i[Fe]),previewDialogDelete:C.toLanguageString(_e,i[_e]),previewDialogEdit:C.toLanguageString(ze,i[ze]),onShowPreviewPane:K,onClosePreviewPane:X,onMenuItemSelect:M,onShowMenu:L,onHideMenu:y,onMenuButtonBlur:A,onTaskDelete:a,onTaskEdit:q,onCloseConfirmDialog:z,card:ue.Card,cardHeader:pe,cardBody:Ge,confirmDialog:le,previewDialog:Je})};Te.propTypes={task:S.object.isRequired};Te.displayName="KendoReactTaskBoardCardBase";const me=e=>{const[a,o]=t.useState(!1),[r,T]=t.useState(!1),[c,d]=t.useState(!1),[u,l]=t.useState(),{dragTargetRef:D,column:B,onColumnChange:b,tasks:P,elementRef:g,style:C,onTaskCreate:I,onTaskEdit:M,onTaskDelete:L}=e,y=ge.useLocalization(),A=t.useCallback(m=>{const O={...B,title:m.value};b.call(void 0,O,B)},[B,b]),z=t.useCallback(()=>{const m={...B,edit:!0};b.call(void 0,m,B)},[B,b]),K=t.useCallback(()=>{const m={...B,edit:!1};b.call(void 0,m,B)},[B,b]),X=t.useCallback(()=>{b.call(void 0,null,B)},[B,b]),q=()=>{d(!c)},j=()=>{o(!0)},V=m=>{T(!0),l(m)},fe=()=>{o(!1),T(!1)},E=t.useCallback(m=>{o(!1),I.call(void 0,{...m,status:B.status})},[I,B]),re=t.useCallback((m,O)=>{T(!1),M.call(void 0,m,O)},[M]),G=t.useCallback(m=>{L.call(void 0,m)},[L]);if(B.isPlaceholder&&D&&D.current){const m=D.current?D.current.width:0,O=D.current?D.current.height:0;return t.createElement("div",{style:{width:m,height:O},className:"k-taskboard-column k-taskboard-drag-placeholder",[Ye]:!0})}return t.createElement(e.columnComponent,{column:e.column,tasks:P,priorities:e.priorities,style:D?{overflow:"visible",...C}:C,tabIndex:e.tabIndex,elementRef:g,onTaskCreate:E,onTaskEdit:re,onTaskDelete:G,card:e.cardComponent,header:Ue,body:Xe,confirmDialog:le,editCardDialog:Ce,addCardDialog:Be,onTitleChange:A,onColumnEnterEdit:z,onColumnExitEdit:K,onColumnConfirmDelete:X,onShowAddCardDialog:j,onShowEditCardPane:V,onColumnDelete:q,onCloseDialog:fe,showAddCard:a,showEditCard:r,showColumnConfirmDelete:c,editedTask:u,confirmDialogMessage:y.toLanguageString(Me,i[Me]),confirmDialogTitle:y.toLanguageString(Ae,i[Ae]),confirmDialogConfirmButton:y.toLanguageString(Ke,i[Ke]),confirmDialogCancelButton:y.toLanguageString(qe,i[qe]),editButtonTitle:y.toLanguageString(he,i[he]),addButtonTitle:y.toLanguageString(ye,i[ye]),closeButtonTitle:y.toLanguageString(ve,i[ve])},P&&P.map(m=>t.createElement(Te,{key:m.id,tabIndex:e.tabIndex,task:m,disabled:!!e.column.edit,onDeleteTask:()=>G(m),showEditPane:()=>V(m),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:m.priority.color},cardComponent:e.cardComponent})))};me.propTypes={column:S.object.isRequired,taskMap:S.object};me.displayName="KendoReactTaskBoardColumn";const ct=(e,a,o)=>{let r=-1,T=-1;for(let c=0;c<o.length;c++){const d=String(o[c].id);if(d===e&&(T=c),d===a&&(r=c),r!==-1&&T!==-1)return{dragIndex:T,dropIndex:r}}return null},et=e=>{for(;e;){if(!e.getAttribute)return null;const a=e.getAttribute(Ve);if(a)return{id:a,type:e.getAttribute(je)||"",element:e};e=e.parentNode}return null},ut=(e,a)=>{const o=a.dataItem.color,r=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:o}}," "),e.props.children);return t.cloneElement(e,e.props,r)},mt=(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)},Q=e=>t.createElement(t.Fragment,null,t.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:x.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[je]:J,[Ve]: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}));Q.displayName="KendoReactTaskBoardCard";const ie=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(w.Button,{icon:"x",svgIcon:_.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(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"title"},e.titleLabel),t.createElement(be.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),t.createElement(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"description"},e.descriptionLabel),t.createElement(be.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),t.createElement(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"priority"},e.priorityLabel),t.createElement(lt.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:ut,valueRender:mt,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(w.Button,{onClick:e.onClose},e.cancelButton),t.createElement(w.Button,{themeColor:"primary",onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));ie.propTypes={};ie.displayName="KendoReactTaskBoardEditPane";const ke=e=>t.createElement(t.Fragment,null,t.createElement("div",{ref:e.elementRef,style:e.style,className:x.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[je]:p,[Ve]: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:ie}),e.showEditCard&&e.editedTask&&t.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:ie}),e.showColumnConfirmDelete&&t.createElement(e.confirmDialog,{onClose:e.onColumnDelete,onConfirm:e.onColumnConfirmDelete,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}));ke.displayName="KendoReactTaskBoardColumn";const Qe=t.forwardRef((e,a)=>{ot.validatePackage(rt);const{columnData:o=[],className:r,style:T,id:c,taskData:d=[],onChange:u}=e,l=t.useRef(null),D=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"),P=t.useRef(null),g=t.useRef(null),C=t.useRef(null),[I,M]=t.useState(null),[L,y]=t.useState(null),[A,z]=t.useState({top:0,left:0}),K=t.useRef(null),X=t.useRef(null),q=t.useMemo(()=>{const n={};return(I||d).forEach(k=>{const s=k.status;n[s]||(n[s]=[]),n[s].push(k)}),n},[d,I]),j=t.useCallback(n=>{const k=n.originalEvent.target;if(k.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const s=et(k),f=D.current;if(s&&f){const h=s.type===p;if(h&&!k.closest(".k-taskboard-column-header"))return;const W=s.element.getBoundingClientRect(),Y=f.getBoundingClientRect();C.current={x:n.clientX-W.left+Y.left,y:n.clientY-W.top+Y.top};const R=h?o:d,se=h?y:M,N=R.findIndex(de=>String(de.id)===s.id),F=R[N];if(N===-1||F.edit)return;const v=x.clone(F);v.isPlaceholder=!0;const U=[...R];U[N]=v,g.current={...s,index:N,item:F,width:W.width,height:W.height},z({top:n.clientY-C.current.y,left:n.clientX-C.current.x}),se(U)}},[o,d]),V=t.useCallback(n=>{const k=g.current,s=K.current&&K.current.element||X.current;if(k&&s){z({top:n.clientY-C.current.y,left:n.clientX-C.current.x}),s.style.visibility="hidden";const f=document.elementFromPoint(n.clientX,n.clientY);if(s.style.visibility="",f&&f.getAttribute(Ye))return;const h=f&&et(f);if(h){let H;const W=h.type===k.type,Y=k.type===p,R=(Y?L:I)||[],se=Y?y:M;if(Y||W){if(H=ct(k.id,h.id,R),H){const N=R[H.dragIndex],F=R[H.dropIndex],v=x.clone(N);Y||(v.status=F.status);const U=[...R];U.splice(H.dragIndex,1),U.splice(H.dropIndex,0,v),k.index=H.dropIndex,se(U)}}else{const N=R.findIndex(v=>String(v.id)===k.id),F=o.findIndex(v=>String(v.id)===h.id);if(N!==-1&&F!==-1){const v=R[N],de=o[F].status;if(q[de])return;v.status=de;const ce=[...R];ce.splice(N,1),ce.push(v),k.index=ce.length-1,se(ce)}}}}},[L,I,o,q]),fe=t.useCallback(()=>{const n=g.current;if(u&&n){const s=(n.type===p?L:I)||[],f=s[n.index];delete f.isPlaceholder;const h={data:s,type:n.type,previousItem:n.item,item:f};u.call(void 0,h)}g.current=null,C.current=null,M(null),y(null),z({top:0,left:0})},[L,I,u]);x.useDraggable(P,{onDragStart:j,onDrag:V,onDragEnd:fe});const E=g.current,re=t.useCallback(n=>{const s={data:[...d,n],type:J,previousItem:null,item:n};u.call(void 0,s)},[u,d]),G=t.useCallback((n,k)=>{const s=d.slice(),f=d.indexOf(k);f!==-1&&s.splice(f,1,n);const h={data:s,type:J,previousItem:k,item:n};u.call(void 0,h)},[u,d]),m=t.useCallback(n=>{const s={data:d.filter(f=>f!==n),type:J,previousItem:n,item:null};u.call(void 0,s)},[u,d]),O=t.useCallback((n,k)=>{const s=o.slice(),f=s.indexOf(k);f!==-1&&(n?s.splice(f,1,n):s.splice(f,1));const h={data:s,type:p,previousItem:k,item:n};u.call(void 0,h)},[u,o]);return t.createElement("div",{id:c,style:T,ref:D,className:x.classNames("k-widget k-taskboard",r)},b,t.createElement("div",{className:"k-taskboard-content",style:E?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:P},(L||o).map(n=>t.createElement(me,{key:n.id,tabIndex:e.tabIndex,column:n,tasks:q[n.status]||[],dragTargetRef:g,onTaskCreate:re,onTaskEdit:G,onTaskDelete:m,onColumnChange:O,columnComponent:e.column||ke,cardComponent:e.card||Q,priorities:e.priorities})))),E&&E.type===J&&t.createElement(Te,{elementRef:K,style:{position:"absolute",width:E.width,height:E.height,top:A.top,left:A.left,zIndex:10,borderLeftColor:E.item.priority?E.item.priority.color:E.item.color},task:E.item,dragTargetRef:g,cardComponent:e.card||Q,onDeleteTask:x.noop,showEditPane:x.noop}),E&&E.type===p&&t.createElement(me,{elementRef:X,style:{position:"absolute",width:E.width,height:E.height,top:A.top,left:A.left,zIndex:10},cardComponent:e.card||Q,columnComponent:e.column||ke,column:E.item,tasks:q[E.item.status],priorities:e.priorities,dragTargetRef:g,onTaskDelete:m,onColumnChange:O,onTaskEdit:G,onTaskCreate:re}))});Qe.propTypes={columnData:S.array.isRequired,taskData:S.array.isRequired};Qe.displayName="KendoReactTaskBoard";const Ze=e=>{const{className:a,style:o,children:r}=e;return t.createElement("div",{style:o,className:x.classNames("k-taskboard-header",a)},t.createElement("div",{className:"k-taskboard-toolbar k-toolbar"},r))};Ze.propTypes={children:S.node};Ze.displayName="KendoReactTaskBoardToolbar";exports.TaskBoard=Qe;exports.TaskBoardAddCard=Be;exports.TaskBoardCard=Q;exports.TaskBoardCardBody=Ge;exports.TaskBoardCardHeader=pe;exports.TaskBoardColumn=ke;exports.TaskBoardColumnBody=Xe;exports.TaskBoardColumnHeader=Ue;exports.TaskBoardConfirmDialog=le;exports.TaskBoardEditCard=Ce;exports.TaskBoardPreviewDialog=Je;exports.TaskBoardTaskEditPane=ie;exports.TaskBoardToolbar=Ze;exports.useTaskEditing=We;
5
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const tt=require("react"),S=require("prop-types"),L=require("@progress/kendo-react-common"),ge=require("@progress/kendo-react-intl"),w=require("@progress/kendo-react-buttons"),be=require("@progress/kendo-react-inputs"),z=require("@progress/kendo-svg-icons"),pe=require("@progress/kendo-react-dialogs"),ue=require("@progress/kendo-react-layout"),at=require("@progress/kendo-react-popup"),nt=require("@progress/kendo-react-dropdowns"),Ee=require("@progress/kendo-react-labels"),De=require("@progress/kendo-react-form");function ot(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const t=ot(tt),it={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",rt="taskBoard.toolbarSearchField",he="taskBoard.editColumnButton",ye="taskBoard.addCardButton",ve="taskBoard.deleteColumnButton",Se="taskBoard.editCardButton",we="taskBoard.deleteCardButton",Pe="taskBoard.deleteTaskDialogMessage",Ie="taskBoard.deleteTaskDialogTitle",Re="taskBoard.deleteTaskConfirmButton",Le="taskBoard.deleteTaskCancelButton",Ne="taskBoard.addCardTitle",$="taskBoard.addCardTitleLabel",p="taskBoard.addCardDescriptionLabel",ee="taskBoard.addCardPriorityLabel",xe="taskBoard.addCardCreateButton",Me="taskBoard.deleteColumnDialogMessage",Ae="taskBoard.deleteColumnDialogTitle",Ke="taskBoard.deleteColumnConfirmButton",qe="taskBoard.deleteColumnCancelButton",Oe="taskBoard.editCardPaneTitle",He="taskBoard.editCardPaneSaveButton",te="taskBoard.editPaneTitleLabel",ae="taskBoard.editPaneDescriptionLabel",ne="taskBoard.editPanePriorityLabel",oe="taskBoard.editPaneCancelButton",Fe="taskBoard.previewPanePriorityLabel",ze="taskBoard.previewPaneDeleteButton",_e="taskBoard.previewPaneEditButton",i={[lt]:"Add column",[rt]:"Search",[he]:"Edit column",[ye]:"Add card",[ve]:"Delete column",[Se]:"Edit card",[we]:"Delete card",[Pe]:"Are you sure you want to delete this card?",[Ie]:"Delete Card",[Re]:"Delete",[Le]:"Cancel",[Me]:"Are you sure you want to delete this column?",[Ae]:"Delete column?",[Ke]:"Delete",[qe]:"Cancel",[Ne]:"Create new card",[xe]:"Create",[oe]:"Cancel",[Oe]:"Edit",[He]:"Save changes",[te]:"Title:",[ae]:"Description:",[ne]:"Priority:",[$]:"Title",[p]:"Description",[ee]:"Priority",[Fe]:"Priority:",[ze]:"Delete",[_e]:"Edit"},je="data-taskboard-type",Ve="data-taskboard-id",Ye="data-taskboard-placeholder",G="column",Q="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(be.Input,{value:o,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):o),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:L.classNames("k-taskboard-column-header-actions",{"k-disabled":a})},t.createElement(w.Button,{fillMode:"flat",icon:"pencil",svgIcon:z.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),t.createElement(w.Button,{fillMode:"flat",icon:"plus",svgIcon:z.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),t.createElement(w.Button,{fillMode:"flat",icon:"x",svgIcon:z.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 le=e=>{const{onClose:a,onConfirm:o,dialogMessage:r,dialogTitle:T,dialogConfirmButton:c,dialogCancelButton:d}=e;return t.createElement(pe.Dialog,{title:T,closeIcon:!1},r,t.createElement(pe.DialogActionsBar,{layout:"end"},t.createElement(w.Button,{themeColor:"primary",onClick:o},c),t.createElement(w.Button,{onClick:a},d)))};le.propTypes={onClose:S.func.isRequired,onConfirm:S.func.isRequired,dialogMessage:S.string.isRequired,dialogTitle:S.string.isRequired,dialogConfirmButton:S.string.isRequired,dialogCancelButton:S.string.isRequired};le.displayName="KendoReactTaskBoardConfirmDialog";const We=({onSave:e,task:a,priorities:o})=>{const[r,T]=t.useState(a?a.title:""),[c,d]=t.useState(a?a.description:""),[u,l]=t.useState(a?a.priority:o[0]),D=t.useCallback(g=>{T(g.value)},[]),B=t.useCallback(g=>{d(g.value)},[]),b=t.useCallback(g=>{l(g.target.value)},[]),P=t.useCallback(g=>{const C={id:void 0,status:"",...a||{},title:r,description:c,priority:u};e.call(void 0,C,a)},[e,a,r,c,u]);return{onTitleChange:D,title:r,onDescriptionChange:B,description:c,onPriorityChange:b,priority:u,onSave:P}},Ce=e=>{const{onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d,onSave:u}=We(e),l=ge.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Oe,i[Oe])+e.task.title,titleInputTitle:l.toLanguageString($,i[$]),descriptionInputTitle:l.toLanguageString(p,i[p]),priorityDropDownTitle:l.toLanguageString(ee,i[ee]),task:e.task,saveButton:l.toLanguageString(He,i[He]),cancelButton:l.toLanguageString(oe,i[oe]),priorities:e.priorities,titleLabel:l.toLanguageString(te,i[te]),descriptionLabel:l.toLanguageString(ae,i[ae]),priorityLabel:l.toLanguageString(ne,i[ne]),onSave:u,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d})};Ce.propTypes={};Ce.displayName="KendoReactTaskBoardEditCard";const Be=e=>{const{onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d,onSave:u}=We(e),l=ge.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Ne,i[Ne]),titleInputTitle:l.toLanguageString($,i[$]),descriptionInputTitle:l.toLanguageString(p,i[p]),priorityDropDownTitle:l.toLanguageString(ee,i[ee]),titleLabel:l.toLanguageString(te,i[te]),descriptionLabel:l.toLanguageString(ae,i[ae]),priorityLabel:l.toLanguageString(ne,i[ne]),saveButton:l.toLanguageString(xe,i[xe]),cancelButton:l.toLanguageString(oe,i[oe]),priorities:e.priorities,onSave:u,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d})};Be.propTypes={};Be.displayName="KendoReactTaskBoardAddCard";const Ge=e=>{const a=t.useRef();return t.createElement(ue.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(w.Button,{fillMode:"flat",icon:"more-vertical",svgIcon:z.moreVerticalIcon,ref:a,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(at.Popup,{anchor:a.current&&a.current.element,show:e.showMenu,ref:e.popupRef},t.createElement(ue.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};Ge.displayName="KendoReactTaskBoardCardHeader";const Je=e=>t.createElement(ue.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(w.Button,{icon:"x",svgIcon:z.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(w.Button,{onClick:e.onTaskDelete},e.delete),t.createElement(w.Button,{themeColor:"primary",onClick:e.onTaskEdit},e.edit)));Qe.displayName="KendoReactTaskBoardPreviewDialog";const Te=e=>{const{onDeleteTask:a,showEditPane:o,task:r,style:T,dragTargetRef:c,elementRef:d}=e,[u,l]=t.useState(!1),[D,B]=t.useState(!1),[b,P]=t.useState(!1),g=t.useRef(null),C=ge.useLocalization(),I=[{text:C.toLanguageString(Se,i[Se]),icon:"pencil",svgIcon:z.pencilIcon,data:()=>{o(r),l(!u)}},{text:C.toLanguageString(we,i[we]),icon:"trash",svgIcon:z.trashIcon,data:()=>{B(!D),l(!u)}}],M=j=>{j.item.data()},N=()=>{l(!0)},y=()=>{l(!1)},A=j=>{const V=g.current&&g.current.element;V&&V.contains(j.relatedTarget)||l(!1)},_=()=>{B(!D)},K=()=>{P(!0)},X=()=>{P(!1)},q=()=>{o(r),K()};return r.isPlaceholder&&c&&c.current?t.createElement("div",{style:{width:c.current.width,height:c.current.height},className:"k-taskboard-drag-placeholder",[Ye]:!0}):t.createElement(e.cardComponent,{task:r,style:T,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:d,showMenu:u,showDeleteConfirm:D,showTaskPreviewPane:b,menuItems:I,popupRef:g,confirmDialogMessage:C.toLanguageString(Pe,i[Pe]),confirmDialogTitle:C.toLanguageString(Ie,i[Ie]),confirmDialogConfirmButton:C.toLanguageString(Re,i[Re]),confirmDialogCancelButton:C.toLanguageString(Le,i[Le]),previewDialogPriorityLabel:C.toLanguageString(Fe,i[Fe]),previewDialogDelete:C.toLanguageString(ze,i[ze]),previewDialogEdit:C.toLanguageString(_e,i[_e]),onShowPreviewPane:K,onClosePreviewPane:X,onMenuItemSelect:M,onShowMenu:N,onHideMenu:y,onMenuButtonBlur:A,onTaskDelete:a,onTaskEdit:q,onCloseConfirmDialog:_,card:ue.Card,cardHeader:Ge,cardBody:Je,confirmDialog:le,previewDialog:Qe})};Te.propTypes={task:S.object.isRequired};Te.displayName="KendoReactTaskBoardCardBase";const me=e=>{const[a,o]=t.useState(!1),[r,T]=t.useState(!1),[c,d]=t.useState(!1),[u,l]=t.useState(),{dragTargetRef:D,column:B,onColumnChange:b,tasks:P,elementRef:g,style:C,onTaskCreate:I,onTaskEdit:M,onTaskDelete:N}=e,y=ge.useLocalization(),A=t.useCallback(m=>{const O={...B,title:m.value};b.call(void 0,O,B)},[B,b]),_=t.useCallback(()=>{const m={...B,edit:!0};b.call(void 0,m,B)},[B,b]),K=t.useCallback(()=>{const m={...B,edit:!1};b.call(void 0,m,B)},[B,b]),X=t.useCallback(()=>{b.call(void 0,null,B)},[B,b]),q=()=>{d(!c)},j=()=>{o(!0)},V=m=>{T(!0),l(m)},fe=()=>{o(!1),T(!1)},E=t.useCallback(m=>{o(!1),I.call(void 0,{...m,status:B.status})},[I,B]),re=t.useCallback((m,O)=>{T(!1),M.call(void 0,m,O)},[M]),J=t.useCallback(m=>{N.call(void 0,m)},[N]);if(B.isPlaceholder&&D&&D.current){const m=D.current?D.current.width:0,O=D.current?D.current.height:0;return t.createElement("div",{style:{width:m,height:O},className:"k-taskboard-column k-taskboard-drag-placeholder",[Ye]:!0})}return t.createElement(e.columnComponent,{column:e.column,tasks:P,priorities:e.priorities,style:D?{overflow:"visible",...C}:C,tabIndex:e.tabIndex,elementRef:g,onTaskCreate:E,onTaskEdit:re,onTaskDelete:J,card:e.cardComponent,header:Ue,body:Xe,confirmDialog:le,editCardDialog:Ce,addCardDialog:Be,onTitleChange:A,onColumnEnterEdit:_,onColumnExitEdit:K,onColumnConfirmDelete:X,onShowAddCardDialog:j,onShowEditCardPane:V,onColumnDelete:q,onCloseDialog:fe,showAddCard:a,showEditCard:r,showColumnConfirmDelete:c,editedTask:u,confirmDialogMessage:y.toLanguageString(Me,i[Me]),confirmDialogTitle:y.toLanguageString(Ae,i[Ae]),confirmDialogConfirmButton:y.toLanguageString(Ke,i[Ke]),confirmDialogCancelButton:y.toLanguageString(qe,i[qe]),editButtonTitle:y.toLanguageString(he,i[he]),addButtonTitle:y.toLanguageString(ye,i[ye]),closeButtonTitle:y.toLanguageString(ve,i[ve])},P&&P.map(m=>t.createElement(Te,{key:m.id,tabIndex:e.tabIndex,task:m,disabled:!!e.column.edit,onDeleteTask:()=>J(m),showEditPane:()=>V(m),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:m.priority.color},cardComponent:e.cardComponent})))};me.propTypes={column:S.object.isRequired,taskMap:S.object};me.displayName="KendoReactTaskBoardColumn";const st=(e,a,o)=>{let r=-1,T=-1;for(let c=0;c<o.length;c++){const d=String(o[c].id);if(d===e&&(T=c),d===a&&(r=c),r!==-1&&T!==-1)return{dragIndex:T,dropIndex:r}}return null},et=e=>{for(;e;){if(!e.getAttribute)return null;const a=e.getAttribute(Ve);if(a)return{id:a,type:e.getAttribute(je)||"",element:e};e=e.parentNode}return null},dt=(e,a)=>{const o=a.dataItem.color,r=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:o}}," "),e.props.children);return t.cloneElement(e,e.props,r)},ct=(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)},Z=e=>t.createElement(t.Fragment,null,t.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:L.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[je]:Q,[Ve]: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}));Z.displayName="KendoReactTaskBoardCard";const ie=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(w.Button,{icon:"x",svgIcon:z.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(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"title"},e.titleLabel),t.createElement(be.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),t.createElement(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"description"},e.descriptionLabel),t.createElement(be.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),t.createElement(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"priority"},e.priorityLabel),t.createElement(nt.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:dt,valueRender:ct,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(w.Button,{onClick:e.onClose},e.cancelButton),t.createElement(w.Button,{themeColor:"primary",onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));ie.propTypes={};ie.displayName="KendoReactTaskBoardEditPane";const ke=e=>t.createElement(t.Fragment,null,t.createElement("div",{ref:e.elementRef,style:e.style,className:L.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[je]:G,[Ve]: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:ie}),e.showEditCard&&e.editedTask&&t.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:ie}),e.showColumnConfirmDelete&&t.createElement(e.confirmDialog,{onClose:e.onColumnDelete,onConfirm:e.onColumnConfirmDelete,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}));ke.displayName="KendoReactTaskBoardColumn";const Ze=t.forwardRef((e,a)=>{L.validatePackage(it);const{columnData:o=[],className:r,style:T,id:c,taskData:d=[],onChange:u}=e,l=t.useRef(null),D=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"),P=t.useRef(null),g=t.useRef(null),C=t.useRef(null),[I,M]=t.useState(null),[N,y]=t.useState(null),[A,_]=t.useState({top:0,left:0}),K=t.useRef(null),X=t.useRef(null),q=t.useMemo(()=>{const n={};return(I||d).forEach(k=>{const s=k.status;n[s]||(n[s]=[]),n[s].push(k)}),n},[d,I]),j=t.useCallback(n=>{const k=n.originalEvent.target;if(k.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const s=et(k),f=D.current;if(s&&f){const h=s.type===G;if(h&&!k.closest(".k-taskboard-column-header"))return;const W=s.element.getBoundingClientRect(),Y=f.getBoundingClientRect();C.current={x:n.clientX-W.left+Y.left,y:n.clientY-W.top+Y.top};const R=h?o:d,se=h?y:M,x=R.findIndex(de=>String(de.id)===s.id),F=R[x];if(x===-1||F.edit)return;const v=L.clone(F);v.isPlaceholder=!0;const U=[...R];U[x]=v,g.current={...s,index:x,item:F,width:W.width,height:W.height},_({top:n.clientY-C.current.y,left:n.clientX-C.current.x}),se(U)}},[o,d]),V=t.useCallback(n=>{const k=g.current,s=K.current&&K.current.element||X.current;if(k&&s){_({top:n.clientY-C.current.y,left:n.clientX-C.current.x}),s.style.visibility="hidden";const f=document.elementFromPoint(n.clientX,n.clientY);if(s.style.visibility="",f&&f.getAttribute(Ye))return;const h=f&&et(f);if(h){let H;const W=h.type===k.type,Y=k.type===G,R=(Y?N:I)||[],se=Y?y:M;if(Y||W){if(H=st(k.id,h.id,R),H){const x=R[H.dragIndex],F=R[H.dropIndex],v=L.clone(x);Y||(v.status=F.status);const U=[...R];U.splice(H.dragIndex,1),U.splice(H.dropIndex,0,v),k.index=H.dropIndex,se(U)}}else{const x=R.findIndex(v=>String(v.id)===k.id),F=o.findIndex(v=>String(v.id)===h.id);if(x!==-1&&F!==-1){const v=R[x],de=o[F].status;if(q[de])return;v.status=de;const ce=[...R];ce.splice(x,1),ce.push(v),k.index=ce.length-1,se(ce)}}}}},[N,I,o,q]),fe=t.useCallback(()=>{const n=g.current;if(u&&n){const s=(n.type===G?N:I)||[],f=s[n.index];delete f.isPlaceholder;const h={data:s,type:n.type,previousItem:n.item,item:f};u.call(void 0,h)}g.current=null,C.current=null,M(null),y(null),_({top:0,left:0})},[N,I,u]);L.useDraggable(P,{onDragStart:j,onDrag:V,onDragEnd:fe});const E=g.current,re=t.useCallback(n=>{const s={data:[...d,n],type:Q,previousItem:null,item:n};u.call(void 0,s)},[u,d]),J=t.useCallback((n,k)=>{const s=d.slice(),f=d.indexOf(k);f!==-1&&s.splice(f,1,n);const h={data:s,type:Q,previousItem:k,item:n};u.call(void 0,h)},[u,d]),m=t.useCallback(n=>{const s={data:d.filter(f=>f!==n),type:Q,previousItem:n,item:null};u.call(void 0,s)},[u,d]),O=t.useCallback((n,k)=>{const s=o.slice(),f=s.indexOf(k);f!==-1&&(n?s.splice(f,1,n):s.splice(f,1));const h={data:s,type:G,previousItem:k,item:n};u.call(void 0,h)},[u,o]);return t.createElement("div",{id:c,style:T,ref:D,className:L.classNames("k-widget k-taskboard",r)},b,t.createElement("div",{className:"k-taskboard-content",style:E?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:P},(N||o).map(n=>t.createElement(me,{key:n.id,tabIndex:e.tabIndex,column:n,tasks:q[n.status]||[],dragTargetRef:g,onTaskCreate:re,onTaskEdit:J,onTaskDelete:m,onColumnChange:O,columnComponent:e.column||ke,cardComponent:e.card||Z,priorities:e.priorities})))),E&&E.type===Q&&t.createElement(Te,{elementRef:K,style:{position:"absolute",width:E.width,height:E.height,top:A.top,left:A.left,zIndex:10,borderLeftColor:E.item.priority?E.item.priority.color:E.item.color},task:E.item,dragTargetRef:g,cardComponent:e.card||Z,onDeleteTask:L.noop,showEditPane:L.noop}),E&&E.type===G&&t.createElement(me,{elementRef:X,style:{position:"absolute",width:E.width,height:E.height,top:A.top,left:A.left,zIndex:10},cardComponent:e.card||Z,columnComponent:e.column||ke,column:E.item,tasks:q[E.item.status],priorities:e.priorities,dragTargetRef:g,onTaskDelete:m,onColumnChange:O,onTaskEdit:J,onTaskCreate:re}))});Ze.propTypes={columnData:S.array.isRequired,taskData:S.array.isRequired};Ze.displayName="KendoReactTaskBoard";const $e=e=>{const{className:a,style:o,children:r}=e;return t.createElement("div",{style:o,className:L.classNames("k-taskboard-header",a)},t.createElement("div",{className:"k-taskboard-toolbar k-toolbar"},r))};$e.propTypes={children:S.node};$e.displayName="KendoReactTaskBoardToolbar";exports.TaskBoard=Ze;exports.TaskBoardAddCard=Be;exports.TaskBoardCard=Z;exports.TaskBoardCardBody=Je;exports.TaskBoardCardHeader=Ge;exports.TaskBoardColumn=ke;exports.TaskBoardColumnBody=Xe;exports.TaskBoardColumnHeader=Ue;exports.TaskBoardConfirmDialog=le;exports.TaskBoardEditCard=Ce;exports.TaskBoardPreviewDialog=Qe;exports.TaskBoardTaskEditPane=ie;exports.TaskBoardToolbar=$e;exports.useTaskEditing=We;
package/index.mjs CHANGED
@@ -4,9 +4,8 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  "use client";
6
6
  import * as t from "react";
7
- import * as S from "prop-types";
8
- import { validatePackage as at } from "@progress/kendo-licensing";
9
- import { classNames as ae, clone as Ye, useDraggable as nt, noop as Ue } from "@progress/kendo-react-common";
7
+ import S from "prop-types";
8
+ import { classNames as ae, validatePackage as at, clone as Ye, useDraggable as nt, noop as Ue } from "@progress/kendo-react-common";
10
9
  import { useLocalization as ce } from "@progress/kendo-react-intl";
11
10
  import { Button as w } from "@progress/kendo-react-buttons";
12
11
  import { Input as fe } from "@progress/kendo-react-inputs";
@@ -21,7 +20,7 @@ const Ct = {
21
20
  name: "@progress/kendo-react-taskboard",
22
21
  productName: "KendoReact",
23
22
  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
24
- publishDate: 1702377188,
23
+ publishDate: 1702631834,
25
24
  version: "",
26
25
  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
27
26
  }, 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-react-taskboard",
3
- "version": "7.0.1",
3
+ "version": "7.0.2-develop.2",
4
4
  "description": "KendoReact TaskBoard package",
5
5
  "author": "Progress",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -10,25 +10,31 @@
10
10
  "types": "./index.d.ts",
11
11
  "exports": {
12
12
  ".": {
13
- "import": "./index.mjs",
14
- "require": "./index.js"
13
+ "import": {
14
+ "types": "./index.d.mts",
15
+ "default": "./index.mjs"
16
+ },
17
+ "require": {
18
+ "types": "./index.d.ts",
19
+ "default": "./index.js"
20
+ }
15
21
  }
16
22
  },
17
23
  "sideEffects": false,
18
24
  "peerDependencies": {
19
25
  "@progress/kendo-data-query": "^1.0.0",
20
- "@progress/kendo-licensing": "^1.3.0",
21
- "@progress/kendo-react-buttons": "7.0.1",
22
- "@progress/kendo-react-common": "7.0.1",
23
- "@progress/kendo-react-dialogs": "7.0.1",
24
- "@progress/kendo-react-dropdowns": "7.0.1",
25
- "@progress/kendo-react-form": "7.0.1",
26
- "@progress/kendo-react-indicators": "7.0.1",
27
- "@progress/kendo-react-inputs": "7.0.1",
28
- "@progress/kendo-react-intl": "7.0.1",
29
- "@progress/kendo-react-labels": "7.0.1",
30
- "@progress/kendo-react-layout": "7.0.1",
31
- "@progress/kendo-react-popup": "7.0.1",
26
+ "@progress/kendo-licensing": "^1.3.4",
27
+ "@progress/kendo-react-buttons": "7.0.2-develop.2",
28
+ "@progress/kendo-react-common": "7.0.2-develop.2",
29
+ "@progress/kendo-react-dialogs": "7.0.2-develop.2",
30
+ "@progress/kendo-react-dropdowns": "7.0.2-develop.2",
31
+ "@progress/kendo-react-form": "7.0.2-develop.2",
32
+ "@progress/kendo-react-indicators": "7.0.2-develop.2",
33
+ "@progress/kendo-react-inputs": "7.0.2-develop.2",
34
+ "@progress/kendo-react-intl": "7.0.2-develop.2",
35
+ "@progress/kendo-react-labels": "7.0.2-develop.2",
36
+ "@progress/kendo-react-layout": "7.0.2-develop.2",
37
+ "@progress/kendo-react-popup": "7.0.2-develop.2",
32
38
  "@progress/kendo-svg-icons": "^2.0.0",
33
39
  "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
34
40
  "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"