@progress/kendo-react-taskboard 13.3.0-develop.9 → 13.4.0-develop.1

package/column/Column.d.ts

@@ -0,0 +1,165 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { InputChangeEvent } from '@progress/kendo-react-inputs';
+import { TaskBoardAddCardProps } from './../TaskBoardAddCard.js';
+import { TaskBoardEditCardProps } from './../TaskBoardEditCard.js';
+import { TaskBoardConfirmDialogProps } from './../TaskBoardConfirmDialog.js';
+import { TaskBoardCardProps } from './../card/Card.js';
+import { TaskBoardColumnHeaderProps } from './ColumnHeader.js';
+import { TaskBoardColumnBodyProps } from './ColumnBody.js';
+import { TaskBoardColumnModel, TaskBoardPriority, TaskBoardTaskModel } from '../TaskBoard.js';
+import * as React from 'react';
+/**
+ * Represents the props of the TaskBoardColumn component
+ */
+export interface TaskBoardColumnProps {
+    /**
+     * The column of the TaskBoard.
+     */
+    column: TaskBoardColumnModel;
+    /**
+     * The tasks of the TaskBoard.
+     */
+    tasks: TaskBoardTaskModel[];
+    /**
+     * The priorities that are set in the TaskBoard.
+     */
+    priorities: TaskBoardPriority[];
+    /**
+     * The styles for the TaskBoard.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies the `tabIndex` that will be added to the TaskBoard Column element.
+     */
+    tabIndex?: number;
+    /**
+     * Represents the reference of the element.
+     */
+    elementRef?: React.RefObject<HTMLDivElement | null>;
+    /**
+     * Determines the visibility of the add card.
+     */
+    showAddCard: boolean;
+    /**
+     * Determines the visibility of the edit card.
+     */
+    showEditCard: boolean;
+    /**
+     * Determines the visibility of the column confirm/delete.
+     */
+    showColumnConfirmDelete: boolean;
+    /**
+     * Specifies the edited task.
+     */
+    editedTask?: TaskBoardTaskModel;
+    /**
+     * Specifies the confirm dialog message
+     */
+    confirmDialogMessage: React.ReactNode;
+    /**
+     * Specifies the confirm dialog confirm button node.
+     */
+    confirmDialogConfirmButton: React.ReactNode;
+    /**
+     * Specifies the cancel dialog confirm button node.
+     */
+    confirmDialogCancelButton: React.ReactNode;
+    /**
+     * Specifies the confirm dialog title.
+     */
+    confirmDialogTitle: string;
+    /**
+     * Specifies the edit button title.
+     */
+    editButtonTitle: string;
+    /**
+     * Specifies the add button title.
+     */
+    addButtonTitle: string;
+    /**
+     * Specifies the close button title.
+     */
+    closeButtonTitle: string;
+    /**
+     * Determines the children nodes.
+     */
+    children: React.ReactNode;
+    /**
+     * Fire on task creation.
+     */
+    onTaskCreate: (task: TaskBoardTaskModel) => void;
+    /**
+     * Fires when task is edited.
+     */
+    onTaskEdit: (task: TaskBoardTaskModel, prevTask: TaskBoardTaskModel) => void;
+    /**
+     * Fires when task is deleted.
+     */
+    onTaskDelete: (task: TaskBoardTaskModel) => void;
+    /**
+     * Fires when title is changed.
+     */
+    onTitleChange?: (event: InputChangeEvent) => void;
+    /**
+     * Fires when column enters edit.
+     */
+    onColumnEnterEdit: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when column exits edit.
+     */
+    onColumnExitEdit: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Fires on confirmation of column deletion.
+     */
+    onColumnConfirmDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when the add card dialog is shown.
+     */
+    onShowAddCardDialog: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when the edit card pane is shown.
+     */
+    onShowEditCardPane: (task: TaskBoardTaskModel) => void;
+    /**
+     * Fires on column deletion.
+     */
+    onColumnDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The Close Button click event handler of the TaskBoardConfirmDialog component.
+     */
+    onCloseDialog: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Represents the TaskBoardCard component.
+     */
+    card: React.ComponentType<TaskBoardCardProps>;
+    /**
+     * Represents the TaskBoardColumnHeader component.
+     */
+    header: React.ComponentType<TaskBoardColumnHeaderProps>;
+    /**
+     * Represents the TaskBoardColumnBody component.
+     */
+    body: React.ComponentType<TaskBoardColumnBodyProps>;
+    /**
+     * Represents the TaskBoardConfirmDialog component.
+     */
+    confirmDialog: React.ComponentType<TaskBoardConfirmDialogProps>;
+    /**
+     * Represents the TaskBoardEditCard component.
+     */
+    editCardDialog: React.ComponentType<TaskBoardEditCardProps>;
+    /**
+     * Represents the TaskBoardAddCard component.
+     */
+    addCardDialog: React.ComponentType<TaskBoardAddCardProps>;
+}
+/**
+ * Represents the TaskBoardColumn component.
+ */
+export declare const TaskBoardColumn: React.FunctionComponent<TaskBoardColumnProps>;

package/column/Column.mjs

@@ -7,7 +7,7 @@
  */
 import * as t from "react";
 import { classNames as a } from "@progress/kendo-react-common";
-import { TASKBOARD_ITEM_TYPE as l, TASKBOARD_COLUMN as i, TASKBOARD_ITEM_ID as o } from "../constants.mjs";
+import { TASKBOARD_COLUMN as l, TASKBOARD_ITEM_ID as i, TASKBOARD_ITEM_TYPE as o } from "../constants.mjs";
 import { TaskBoardTaskEditPane as n } from "../TaskBoardTaskEditPane.mjs";
 const d = (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
   "div",
@@ -18,8 +18,8 @@ const d = (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__
       "k-taskboard-column-edit": e.column.edit
     }),
     tabIndex: e.tabIndex,
-    [l]: i,
-    [o]: e.column.id
+    [o]: l,
+    [i]: e.column.id
   },
   /* @__PURE__ */ t.createElement(
     e.header,

package/column/ColumnBody.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * Represents the props of the TaskBoardColumnBody component
+ */
+export interface TaskBoardColumnBodyProps {
+    /**
+     * Determines the children nodes.
+     */
+    children: React.ReactNode;
+}
+/**
+ * Represents the TaskBoardColumnBody component.
+ */
+export declare const TaskBoardColumnBody: React.FunctionComponent<TaskBoardColumnBodyProps>;

package/column/ColumnHeader.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { InputChangeEvent } from '@progress/kendo-react-inputs';
+import { TaskBoardColumnModel, TaskBoardTaskModel } from '../TaskBoard.js';
+import * as React from 'react';
+/**
+ * Represents the props of the TaskBoardColumnHeader component.
+ */
+export interface TaskBoardColumnHeaderProps {
+    /**
+     * The rendered column.
+     */
+    column: TaskBoardColumnModel;
+    /**
+     * The rendered tasks.
+     */
+    tasks: TaskBoardTaskModel[];
+    /**
+     * The title of the editButton.
+     */
+    editButtonTitle: string;
+    /**
+     * The title of the addButton.
+     */
+    addButtonTitle: string;
+    /**
+     * The title of the closeButton.
+     */
+    closeButtonTitle: string;
+    /**
+     * The event that is fired when the title is changed.
+     */
+    onTitleChange?: (event: InputChangeEvent) => void;
+    /**
+     * The event that is fired when a column enters edit mode.
+     */
+    onColumnEnterEdit: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The event that is fired when a column exits edit mode.
+     */
+    onColumnExitEdit: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * The event that is fired when a add card dialog is shown.
+     */
+    onShowAddCardDialog: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The event that is fired when a column is deleted.
+     */
+    onColumnDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * Represents the TaskBoardColumnHeader component.
+ */
+export declare const TaskBoardColumnHeader: React.FunctionComponent<TaskBoardColumnHeaderProps>;

package/constants.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const TASKBOARD_ITEM_TYPE = "data-taskboard-type";
+/**
+ * @hidden
+ */
+export declare const TASKBOARD_ITEM_ID = "data-taskboard-id";
+/**
+ * @hidden
+ */
+export declare const TASKBOARD_PLACEHOLDER = "data-taskboard-placeholder";
+/**
+ * @hidden
+ */
+export declare const TASKBOARD_COLUMN = "column";
+/**
+ * @hidden
+ */
+export declare const TASKBOARD_TASK = "task";

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

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

package/hooks/taskEditing.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';
+import { InputChangeEvent } from '@progress/kendo-react-inputs';
+import { TaskBoardPriority, TaskBoardTaskModel } from '../TaskBoard.js';
+import * as React from 'react';
+export interface TaskEditingResult {
+    /**
+     * Handles changes to the task title input field.
+     */
+    onTitleChange: (event: InputChangeEvent) => void;
+    /**
+     * The current title value of the task being edited.
+     */
+    title: string;
+    /**
+     * Handles changes to the task description input field.
+     */
+    onDescriptionChange: (event: InputChangeEvent) => void;
+    /**
+     * The current description value of the task being edited.
+     */
+    description: string;
+    /**
+     * Handles changes to the task priority dropdown selection.
+     */
+    onPriorityChange: (event: DropDownListChangeEvent) => void;
+    /**
+     * The current priority value of the task being edited.
+     */
+    priority: TaskBoardPriority;
+    /**
+     * Saves the current task changes and calls the parent save handler.
+     */
+    onSave: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export interface TaskEditingProps {
+    /**
+     * The task to be edited. If not provided, creates a new task.
+     */
+    task?: TaskBoardTaskModel;
+    /**
+     * Array of available priority options for the task.
+     */
+    priorities: TaskBoardPriority[];
+    /**
+     * Callback function called when the task is saved.
+     */
+    onSave: (task: TaskBoardTaskModel, prevTask: TaskBoardTaskModel) => void;
+}
+export declare const useTaskEditing: ({ onSave, task, priorities }: TaskEditingProps) => TaskEditingResult;