@progress/kendo-react-taskboard 5.3.0-dev.202205091142 → 5.3.1-dev.202205130741

package/dist/es/TaskBoardAddCard.d.ts

@@ -12,7 +12,7 @@ export interface TaskBoardAddCardProps {
     /**
      * Triggered on `onClose` event of the TaskBoardAddCard.
      */
-    onClose: () => void;
+    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Triggered on `onSave` event of the TaskBoardAddCard.
      */

package/dist/es/TaskBoardCardBase.d.ts

@@ -4,6 +4,8 @@ import { TaskBoardCardProps } from './card/Card';
 import { TaskBoardTaskModel } from './TaskBoard';
 /**
  * Represents the props of the TaskBoardCardBase component
+ *
+ * @hidden
  */
 export interface TaskBoardCardBaseProps {
     /**
@@ -48,6 +50,8 @@ export interface TaskBoardCardBaseProps {
 }
 /**
  * Represents the TaskBoardCardBase component.
+ *
+ * @hidden
  */
 export declare const TaskBoardCardBase: {
     (props: TaskBoardCardBaseProps): JSX.Element;

package/dist/es/TaskBoardCardBase.js

@@ -21,6 +21,8 @@ import { TaskBoardConfirmDialog } from './TaskBoardConfirmDialog';
 import { TaskBoardPreviewDialog } from './card/PreviewDialog';
 /**
  * Represents the TaskBoardCardBase component.
+ *
+ * @hidden
  */
 export var TaskBoardCardBase = function (props) {
     var _a;
@@ -68,7 +70,10 @@ export var TaskBoardCardBase = function (props) {
         setConfirmTaskDeleteVisible(!confirmTaskDeleteVisible);
     };
     var onShowTaskPreviewPane = function () {
-        setShowTaskPreviewPane(!showTaskPreviewPane);
+        setShowTaskPreviewPane(true);
+    };
+    var onClosePreviewPane = function () {
+        setShowTaskPreviewPane(false);
     };
     var onTaskEdit = function () {
         showEditPane(task);
@@ -77,7 +82,7 @@ export var TaskBoardCardBase = function (props) {
     if (task.isPlaceholder && dragTargetRef && dragTargetRef.current) {
         return (React.createElement("div", __assign({ style: { width: dragTargetRef.current.width, height: dragTargetRef.current.height }, className: 'k-taskboard-drag-placeholder' }, (_a = {}, _a[TASKBOARD_PLACEHOLDER] = true, _a))));
     }
-    return (React.createElement(props.cardComponent, { task: task, style: style, tabIndex: props.tabIndex, disabled: props.disabled, elementRef: elementRef, showMenu: optionMenuVisible, showDeleteConfirm: confirmTaskDeleteVisible, showTaskPreviewPane: showTaskPreviewPane, menuItems: optionButtons, popupRef: popupRef, confirmDialogMessage: localization.toLanguageString(taskBoardDeleteTaskDialogMessage, messages[taskBoardDeleteTaskDialogMessage]), confirmDialogTitle: localization.toLanguageString(taskBoardDeleteTaskDialogTitle, messages[taskBoardDeleteTaskDialogTitle]), confirmDialogConfirmButton: localization.toLanguageString(taskBoardDeleteTaskConfirmButton, messages[taskBoardDeleteTaskConfirmButton]), confirmDialogCancelButton: localization.toLanguageString(taskBoardDeleteTaskCancelButton, messages[taskBoardDeleteTaskCancelButton]), previewDialogPriorityLabel: localization.toLanguageString(taskBoardPreviewPanePriorityLabel, messages[taskBoardPreviewPanePriorityLabel]), previewDialogDelete: localization.toLanguageString(taskBoardPreviewPaneDeleteBtn, messages[taskBoardPreviewPaneDeleteBtn]), previewDialogEdit: localization.toLanguageString(taskBoardPreviewPaneEditBtn, messages[taskBoardPreviewPaneEditBtn]), onShowPreviewPane: onShowTaskPreviewPane, onMenuItemSelect: handleSelect, onShowMenu: onShowMenu, onHideMenu: onHideMenu, onMenuButtonBlur: onMenuButtonBlur, onTaskDelete: onDeleteTask, onTaskEdit: onTaskEdit, onCloseConfirmDialog: closeConfirmDialog, card: Card, cardHeader: TaskBoardCardHeader, cardBody: TaskBoardCardBody, confirmDialog: TaskBoardConfirmDialog, previewDialog: TaskBoardPreviewDialog }));
+    return (React.createElement(props.cardComponent, { task: task, style: style, tabIndex: props.tabIndex, disabled: props.disabled, elementRef: elementRef, showMenu: optionMenuVisible, showDeleteConfirm: confirmTaskDeleteVisible, showTaskPreviewPane: showTaskPreviewPane, menuItems: optionButtons, popupRef: popupRef, confirmDialogMessage: localization.toLanguageString(taskBoardDeleteTaskDialogMessage, messages[taskBoardDeleteTaskDialogMessage]), confirmDialogTitle: localization.toLanguageString(taskBoardDeleteTaskDialogTitle, messages[taskBoardDeleteTaskDialogTitle]), confirmDialogConfirmButton: localization.toLanguageString(taskBoardDeleteTaskConfirmButton, messages[taskBoardDeleteTaskConfirmButton]), confirmDialogCancelButton: localization.toLanguageString(taskBoardDeleteTaskCancelButton, messages[taskBoardDeleteTaskCancelButton]), previewDialogPriorityLabel: localization.toLanguageString(taskBoardPreviewPanePriorityLabel, messages[taskBoardPreviewPanePriorityLabel]), previewDialogDelete: localization.toLanguageString(taskBoardPreviewPaneDeleteBtn, messages[taskBoardPreviewPaneDeleteBtn]), previewDialogEdit: localization.toLanguageString(taskBoardPreviewPaneEditBtn, messages[taskBoardPreviewPaneEditBtn]), onShowPreviewPane: onShowTaskPreviewPane, onClosePreviewPane: onClosePreviewPane, onMenuItemSelect: handleSelect, onShowMenu: onShowMenu, onHideMenu: onHideMenu, onMenuButtonBlur: onMenuButtonBlur, onTaskDelete: onDeleteTask, onTaskEdit: onTaskEdit, onCloseConfirmDialog: closeConfirmDialog, card: Card, cardHeader: TaskBoardCardHeader, cardBody: TaskBoardCardBody, confirmDialog: TaskBoardConfirmDialog, previewDialog: TaskBoardPreviewDialog }));
 };
 var defaultProps = {};
 TaskBoardCardBase.propTypes = {

package/dist/es/TaskBoardColumnBase.d.ts

@@ -4,6 +4,8 @@ import { TaskBoardColumnProps } from './column/Column';
 import { TaskBoardColumnModel, TaskBoardPriority, TaskBoardTaskModel } from './TaskBoard';
 /**
  * Represents the props of the TaskBoardColumnBase component
+ *
+ * @hidden
  */
 export interface TaskBoardColumnBaseProps {
     /**
@@ -64,6 +66,8 @@ export interface TaskBoardColumnBaseProps {
 }
 /**
  * Represents the TaskBoardColumnBase component.
+ *
+ * @hidden
  */
 export declare const TaskBoardColumnBase: {
     (props: TaskBoardColumnBaseProps): JSX.Element;

package/dist/es/TaskBoardColumnBase.js

@@ -22,6 +22,8 @@ import { TaskBoardAddCard } from './TaskBoardAddCard';
 import { TaskBoardCardBase } from './TaskBoardCardBase';
 /**
  * Represents the TaskBoardColumnBase component.
+ *
+ * @hidden
  */
 export var TaskBoardColumnBase = function (props) {
     var _a;
@@ -77,7 +79,7 @@ export var TaskBoardColumnBase = function (props) {
         var height = dragTargetRef.current ? dragTargetRef.current.height : 0;
         return (React.createElement("div", __assign({ style: { width: width, height: height }, className: 'k-taskboard-column k-taskboard-drag-placeholder' }, (_a = {}, _a[TASKBOARD_PLACEHOLDER] = true, _a))));
     }
-    return (React.createElement(props.columnComponent, { column: props.column, tasks: tasks, priorities: props.priorities, style: Boolean(dragTargetRef) ? __assign({ overflow: 'visible' }, style) : style, tabIndex: props.tabIndex, elementRef: elementRef, dragTargetRef: dragTargetRef, onTaskCreate: onNewTask, onTaskEdit: editTask, onTaskDelete: deleteTask, card: props.cardComponent, header: TaskBoardColumnHeader, body: TaskBoardColumnBody, confirmDialog: TaskBoardConfirmDialog, editCardDialog: TaskBoardEditCard, addCardDialog: TaskBoardAddCard, onTitleChange: onTitleChange, onColumnEnterEdit: onColumnEnterEdit, onColumnExitEdit: onColumnExitEdit, onColumnConfirmDelete: onConfirmColumnDelete, onShowAddCardDialog: showAddCardDialog, onShowEditCardPane: showEditCardPane, onColumnDelete: onColumnDelete, onCloseDialog: hideCloseModal, showAddCard: addCard, showEditCard: editCardPane, showColumnConfirmDelete: confirmColumnDeleteVisible, editedTask: taskToEdit, confirmDialogMessage: localization.toLanguageString(taskBoardDelColumnDialogMsg, messages[taskBoardDelColumnDialogMsg]), confirmDialogTitle: localization.toLanguageString(taskBoardDelColumnDialogTitle, messages[taskBoardDelColumnDialogTitle]), confirmDialogConfirmButton: localization.toLanguageString(taskBoardDelColumnConfirmBtn, messages[taskBoardDelColumnConfirmBtn]), confirmDialogCancelButton: localization.toLanguageString(taskBoardDelColumnCancelBtn, messages[taskBoardDelColumnCancelBtn]), editButtonTitle: localization.toLanguageString(taskBoardEditColumnButton, messages[taskBoardEditColumnButton]), addButtonTitle: localization.toLanguageString(taskBoardAddCardButton, messages[taskBoardAddCardButton]), closeButtonTitle: localization.toLanguageString(taskBoardDeleteColumnButton, messages[taskBoardDeleteColumnButton]) }, tasks && tasks.map(function (task) {
+    return (React.createElement(props.columnComponent, { column: props.column, tasks: tasks, priorities: props.priorities, style: Boolean(dragTargetRef) ? __assign({ overflow: 'visible' }, style) : style, tabIndex: props.tabIndex, elementRef: elementRef, onTaskCreate: onNewTask, onTaskEdit: editTask, onTaskDelete: deleteTask, card: props.cardComponent, header: TaskBoardColumnHeader, body: TaskBoardColumnBody, confirmDialog: TaskBoardConfirmDialog, editCardDialog: TaskBoardEditCard, addCardDialog: TaskBoardAddCard, onTitleChange: onTitleChange, onColumnEnterEdit: onColumnEnterEdit, onColumnExitEdit: onColumnExitEdit, onColumnConfirmDelete: onConfirmColumnDelete, onShowAddCardDialog: showAddCardDialog, onShowEditCardPane: showEditCardPane, onColumnDelete: onColumnDelete, onCloseDialog: hideCloseModal, showAddCard: addCard, showEditCard: editCardPane, showColumnConfirmDelete: confirmColumnDeleteVisible, editedTask: taskToEdit, confirmDialogMessage: localization.toLanguageString(taskBoardDelColumnDialogMsg, messages[taskBoardDelColumnDialogMsg]), confirmDialogTitle: localization.toLanguageString(taskBoardDelColumnDialogTitle, messages[taskBoardDelColumnDialogTitle]), confirmDialogConfirmButton: localization.toLanguageString(taskBoardDelColumnConfirmBtn, messages[taskBoardDelColumnConfirmBtn]), confirmDialogCancelButton: localization.toLanguageString(taskBoardDelColumnCancelBtn, messages[taskBoardDelColumnCancelBtn]), editButtonTitle: localization.toLanguageString(taskBoardEditColumnButton, messages[taskBoardEditColumnButton]), addButtonTitle: localization.toLanguageString(taskBoardAddCardButton, messages[taskBoardAddCardButton]), closeButtonTitle: localization.toLanguageString(taskBoardDeleteColumnButton, messages[taskBoardDeleteColumnButton]) }, tasks && tasks.map(function (task) {
         return (React.createElement(TaskBoardCardBase, { key: task.id, tabIndex: props.tabIndex, task: task, disabled: Boolean(props.column.edit), onDeleteTask: function () { return deleteTask(task); }, showEditPane: function () { return showEditCardPane(task); }, dragTargetRef: props.dragTargetRef, style: { borderLeftColor: task.priority.color }, cardComponent: props.cardComponent }));
     })));
 };

package/dist/es/TaskBoardConfirmDialog.d.ts

@@ -20,13 +20,13 @@ export interface TaskBoardConfirmDialogProps {
      */
     dialogCancelButton: React.ReactNode;
     /**
-     * Fires when the dialog is closed.
+     * The Close Button click event handler of the TaskBoardConfirmDialog component.
      */
-    onClose: () => void;
+    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Fires when the dialog is confirmed.
+     * The Confirm Button click event handler of the TaskBoardConfirmDialog component.
      */
-    onConfirm: () => void;
+    onConfirm: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**
  * Represents the TaskBoardConfirmDialog component.

package/dist/es/TaskBoardTaskEditPane.d.ts

@@ -63,13 +63,13 @@ export interface TaskBoardTaskEditPaneProps {
      */
     description: string;
     /**
-     * Fires on `onSave` event.
+     * Fires when Save button is clicked.
      */
-    onSave: () => void;
+    onSave: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Fires on `onClose` event.
+     * Fires when Cancel button is clicked.
      */
-    onClose: () => void;
+    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Fires when a title is changed.
      */

package/dist/es/card/Card.d.ts

@@ -35,11 +35,11 @@ export interface TaskBoardCardProps {
      */
     showMenu: boolean;
     /**
-     * Determines the visibility of the delete and confirm items.
+     * Determines the visibility of the task's delete confirmation dialog.
      */
     showDeleteConfirm: boolean;
     /**
-     * Determines the visibility of the previous pane.
+     * Determines the visibility of the task's preview pane.
      */
     showTaskPreviewPane: boolean;
     /**
@@ -51,23 +51,23 @@ export interface TaskBoardCardProps {
      */
     popupRef: React.RefObject<Popup>;
     /**
-     * Represents the confirm dialog message of the TaskBoardCard.
+     * Represents the content of the TaskBoardConfirmDialog component.
      */
     confirmDialogMessage: React.ReactNode;
     /**
-     * Represents the confirm dialog title of the TaskBoardCard.
+     * Represents the title of the TaskBoardConfirmDialog component.
      */
     confirmDialogTitle: string;
     /**
-     * Represents the confirm dialog confirm button.
+     * Represents the content of the confirm button of the TaskBoardConfirmDialog component.
      */
     confirmDialogConfirmButton: React.ReactNode;
     /**
-     * Represents the cancel dialog confirm button.
+     * Represents the content of the cancel button of the TaskBoardConfirmDialog component.
      */
     confirmDialogCancelButton: React.ReactNode;
     /**
-     * Represents the preview dialog priority label.
+     * Represents the priority label in the preview dialog.
      */
     previewDialogPriorityLabel: string;
     /**
@@ -79,37 +79,41 @@ export interface TaskBoardCardProps {
      */
     previewDialogEdit: React.ReactNode;
     /**
-     * Fires on show of the preview pane.
+     * Fires when the preview pane needs to be shown.
      */
-    onShowPreviewPane: () => void;
+    onShowPreviewPane: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Fires when the preview pane needs to be closed.
+     */
+    onClosePreviewPane: (event: React.MouseEvent<HTMLElement>) => void;
     /**
      * Fires on menu item selection.
      */
     onMenuItemSelect: (event: MenuSelectEvent) => void;
     /**
-     * Fires when the menu is shown.
+     * Fires when the menu needs to be shown.
      */
-    onShowMenu: () => void;
+    onShowMenu: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Fires when the menu is hidden.
+     * Fires when the menu needs to be hidden.
      */
-    onHideMenu: () => void;
+    onHideMenu: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Fires on blur of the menu button.
      */
     onMenuButtonBlur: (event: React.FocusEvent<HTMLButtonElement>) => void;
     /**
-     * Fires when task is deleted.
+     * Fires when task's delete button is clicked.
      */
-    onTaskDelete: () => void;
+    onTaskDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Fires when task is edited.
+     * Fires when task's edit button is clicked.
      */
-    onTaskEdit: () => void;
+    onTaskEdit: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Fires on close/confirm dialog.
+     * The Close Button click event handler of the TaskBoardConfirmDialog component.
      */
-    onCloseConfirmDialog: () => void;
+    onCloseConfirmDialog: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Represents the Card component.
      */

package/dist/es/card/Card.js

@@ -28,6 +28,6 @@ export var TaskBoardCard = function (props) {
             React.createElement(props.cardHeader, { showMenu: props.showMenu, menuItems: props.menuItems, popupRef: props.popupRef, title: props.task.title, task: props.task, onShowPreviewPane: props.onShowPreviewPane, onShowMenu: props.onShowMenu, onHideMenu: props.onHideMenu, onMenuButtonBlur: props.onMenuButtonBlur, onMenuItemSelect: props.onMenuItemSelect }),
             React.createElement(props.cardBody, { task: props.task }, props.task.description)),
         props.showDeleteConfirm && (React.createElement(props.confirmDialog, { onConfirm: props.onTaskDelete, onClose: props.onCloseConfirmDialog, dialogMessage: props.confirmDialogMessage, dialogTitle: props.confirmDialogTitle, dialogConfirmButton: props.confirmDialogConfirmButton, dialogCancelButton: props.confirmDialogCancelButton })),
-        props.showTaskPreviewPane && (React.createElement(props.previewDialog, { title: props.task.title, description: props.task.description, priorityLabel: props.previewDialogPriorityLabel, delete: props.previewDialogDelete, edit: props.previewDialogEdit, onShowTaskPreviewPane: props.onShowPreviewPane, onDeleteTask: props.onTaskDelete, onTaskEdit: props.onTaskEdit, priority: props.task.priority }))));
+        props.showTaskPreviewPane && (React.createElement(props.previewDialog, { title: props.task.title, description: props.task.description, priorityLabel: props.previewDialogPriorityLabel, delete: props.previewDialogDelete, edit: props.previewDialogEdit, onClosePreviewPane: props.onClosePreviewPane, onTaskDelete: props.onTaskDelete, onTaskEdit: props.onTaskEdit, priority: props.task.priority }))));
 };
 TaskBoardCard.displayName = 'KendoReactTaskBoardCard';

package/dist/es/card/CardHeader.d.ts

@@ -27,17 +27,17 @@ export interface TaskBoardCardHeaderProps {
      */
     task: TaskBoardTaskModel;
     /**
-     * Fires when the preview pane is shown.
+     * Fires when the preview pane needs to be shown.
      */
-    onShowPreviewPane: () => void;
+    onShowPreviewPane: (event: React.MouseEvent<HTMLElement>) => void;
     /**
-     * Fires when the menu is shown.
+     * Fires when the menu needs to be shown.
      */
-    onShowMenu: () => void;
+    onShowMenu: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Fires when the menu is hidden.
+     * Fires when the menu needs to be hidden.
      */
-    onHideMenu: () => void;
+    onHideMenu: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Fires on blur of the menu button.
      */

package/dist/es/card/PreviewDialog.d.ts

@@ -17,29 +17,29 @@ export interface TaskBoardPreviewDialogProps {
      */
     priorityLabel: React.ReactNode;
     /**
-     * Determines the delete node.
+     * Determines the content of the delete button.
      */
     delete: React.ReactNode;
     /**
-     * Determines the edit node.
+     * Determines the content of the edit button.
      */
     edit: React.ReactNode;
     /**
-     * Represents the priority of the task board.
+     * Represents the priority of the current task.
      */
     priority: TaskBoardPriority;
     /**
-     * Fires when task preview pane is shown.
+     * Fires when the preview pane needs to be shown.
      */
-    onShowTaskPreviewPane: () => void;
+    onClosePreviewPane: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Fires when task is deleted.
      */
-    onDeleteTask: () => void;
+    onTaskDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Fires when task is edited.
      */
-    onTaskEdit: () => void;
+    onTaskEdit: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**
  * Represents the TaskBoardPreviewDialog component.

package/dist/es/card/PreviewDialog.js

@@ -9,7 +9,7 @@ export var TaskBoardPreviewDialog = function (props) {
             React.createElement("div", { className: 'k-taskboard-pane-header-text' }, props.title),
             React.createElement("span", { className: "k-spacer" }),
             React.createElement("div", { className: "k-taskboard-pane-header-actions" },
-                React.createElement(Button, { icon: 'close', fillMode: "flat", onClick: props.onShowTaskPreviewPane }))),
+                React.createElement(Button, { icon: 'close', fillMode: "flat", onClick: props.onClosePreviewPane }))),
         React.createElement("div", { className: "k-taskboard-pane-content" },
             React.createElement("p", null, props.description),
             React.createElement("p", null,
@@ -19,7 +19,7 @@ export var TaskBoardPreviewDialog = function (props) {
                 "\u00A0",
                 props.priority.priority)),
         React.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" },
-            React.createElement(Button, { onClick: props.onDeleteTask }, props.delete),
+            React.createElement(Button, { onClick: props.onTaskDelete }, props.delete),
             React.createElement(Button, { themeColor: 'primary', onClick: props.onTaskEdit }, props.edit))));
 };
 TaskBoardPreviewDialog.displayName = 'KendoReactTaskBoardPreviewDialog';

package/dist/es/column/Column.d.ts

@@ -35,13 +35,6 @@ export interface TaskBoardColumnProps {
      * Represents the reference of the element.
      */
     elementRef?: React.RefObject<HTMLDivElement>;
-    /**
-     * Represents the reference of the drag target.
-     */
-    dragTargetRef?: React.RefObject<{
-        width: number;
-        height: number;
-    }>;
     /**
      * Determines the visibility of the add card.
      */
@@ -109,19 +102,19 @@ export interface TaskBoardColumnProps {
     /**
      * Fires when column enters edit.
      */
-    onColumnEnterEdit: () => void;
+    onColumnEnterEdit: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Fires when column exits edit.
      */
-    onColumnExitEdit: () => void;
+    onColumnExitEdit: (event: React.FocusEvent<HTMLInputElement>) => void;
     /**
      * Fires on confirmation of column deletion.
      */
-    onColumnConfirmDelete: () => void;
+    onColumnConfirmDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Fires when the add card dialog is shown.
      */
-    onShowAddCardDialog: () => void;
+    onShowAddCardDialog: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Fires when the edit card pane is shown.
      */
@@ -129,11 +122,11 @@ export interface TaskBoardColumnProps {
     /**
      * Fires on column deletion.
      */
-    onColumnDelete: () => void;
+    onColumnDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Fires when the dialog is closed.
+     * The Close Button click event handler of the TaskBoardConfirmDialog component.
      */
-    onCloseDialog: () => void;
+    onCloseDialog: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Represents the TaskBoardCard component.
      */

package/dist/es/column/Column.js

@@ -26,7 +26,7 @@ export var TaskBoardColumn = function (props) {
             _a[TASKBOARD_ITEM_ID] = props.column.id,
             _a)),
             React.createElement(props.header, { column: props.column, tasks: props.tasks, onTitleChange: props.onTitleChange, onColumnExitEdit: props.onColumnExitEdit, editButtonTitle: props.editButtonTitle, onColumnEnterEdit: props.onColumnEnterEdit, addButtonTitle: props.addButtonTitle, onShowAddCardDialog: props.onShowAddCardDialog, closeButtonTitle: props.closeButtonTitle, onColumnDelete: props.onColumnDelete }),
-            React.createElement(props.body, { column: props.column, tasks: props.tasks, card: props.card, onTaskDelete: props.onTaskDelete, onShowEditCardPane: props.onShowEditCardPane, dragTargetRef: props.dragTargetRef }, props.children)),
+            React.createElement(props.body, null, props.children)),
         props.showAddCard && (React.createElement(props.addCardDialog, { onClose: props.onCloseDialog, onSave: props.onTaskCreate, priorities: props.priorities, editPane: TaskBoardTaskEditPane })),
         props.showEditCard && props.editedTask && (React.createElement(props.editCardDialog, { onClose: props.onCloseDialog, onSave: props.onTaskEdit, task: props.editedTask, priorities: props.priorities, editPane: TaskBoardTaskEditPane })),
         props.showColumnConfirmDelete && (React.createElement(props.confirmDialog, { onClose: props.onColumnDelete, onConfirm: props.onColumnConfirmDelete, dialogMessage: props.confirmDialogMessage, dialogTitle: props.confirmDialogTitle, dialogConfirmButton: props.confirmDialogConfirmButton, dialogCancelButton: props.confirmDialogCancelButton }))));

package/dist/es/column/ColumnBody.d.ts

@@ -1,41 +1,12 @@
 import * as React from 'react';
-import { TaskBoardCardProps } from '../card/Card';
-import { TaskBoardColumnModel, TaskBoardTaskModel } from '../TaskBoard';
 /**
  * Represents the props of the TaskBoardColumnBody component
  */
 export interface TaskBoardColumnBodyProps {
-    /**
-     * The rendered column.
-     */
-    column: TaskBoardColumnModel;
-    /**
-     * The rendered tasks.
-     */
-    tasks: TaskBoardTaskModel[];
     /**
      * Determines the children nodes.
      */
     children: React.ReactNode;
-    /**
-     * Represents the drag target reference.
-     */
-    dragTargetRef?: React.RefObject<{
-        width: number;
-        height: number;
-    }>;
-    /**
-     * The event that is fired when a task is deleted.
-     */
-    onTaskDelete: (task: TaskBoardTaskModel) => void;
-    /**
-     * The event that is fired when a task is edited.
-     */
-    onShowEditCardPane: (task: TaskBoardTaskModel) => void;
-    /**
-     * Represents the TaskBoardCard component.
-     */
-    card: React.ComponentType<TaskBoardCardProps>;
 }
 /**
  * Represents the TaskBoardColumnBody component.

package/dist/es/column/ColumnHeader.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { InputChangeEvent } from '@progress/kendo-react-inputs';
 import { TaskBoardColumnModel, TaskBoardTaskModel } from '../TaskBoard';
 /**
@@ -32,19 +32,19 @@ export interface TaskBoardColumnHeaderProps {
     /**
      * The event that is fired when a column enters edit mode.
      */
-    onColumnEnterEdit: () => void;
+    onColumnEnterEdit: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * The event that is fired when a column exits edit mode.
      */
-    onColumnExitEdit: () => void;
+    onColumnExitEdit: (event: React.FocusEvent<HTMLInputElement>) => void;
     /**
      * The event that is fired when a add card dialog is shown.
      */
-    onShowAddCardDialog: () => void;
+    onShowAddCardDialog: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * The event that is fired when a column is deleted.
      */
-    onColumnDelete: () => void;
+    onColumnDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**
  * Represents the TaskBoardColumnHeader component.

package/dist/es/hooks/taskEditing.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';
 import { InputChangeEvent } from '@progress/kendo-react-inputs';
 import { TaskBoardPriority, TaskBoardTaskModel } from '../TaskBoard';
@@ -8,7 +9,7 @@ export interface TaskEditingResult {
     description: string;
     onPriorityChange: (event: DropDownListChangeEvent) => void;
     priority: TaskBoardPriority;
-    onSave: () => void;
+    onSave: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 export interface TaskEditingProps {
     task?: TaskBoardTaskModel;

package/dist/es/hooks/taskEditing.js

@@ -24,7 +24,7 @@ export var useTaskEditing = function (_a) {
     var onPriorityChange = React.useCallback(function (event) {
         setPriority(event.target.value);
     }, []);
-    var onSaveIn = React.useCallback(function () {
+    var onSaveIn = React.useCallback(function (_event) {
         var nextTask = __assign({ id: undefined, status: '' }, (task || {}), { title: title, description: description, priority: priority });
         onSave.call(undefined, nextTask, task);
     }, [onSave, task, title, description, priority]);

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-taskboard',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1652096506,
+    publishDate: 1652427600,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/TaskBoardAddCard.d.ts

@@ -12,7 +12,7 @@ export interface TaskBoardAddCardProps {
     /**
      * Triggered on `onClose` event of the TaskBoardAddCard.
      */
-    onClose: () => void;
+    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Triggered on `onSave` event of the TaskBoardAddCard.
      */

package/dist/npm/TaskBoardCardBase.d.ts

@@ -4,6 +4,8 @@ import { TaskBoardCardProps } from './card/Card';
 import { TaskBoardTaskModel } from './TaskBoard';
 /**
  * Represents the props of the TaskBoardCardBase component
+ *
+ * @hidden
  */
 export interface TaskBoardCardBaseProps {
     /**
@@ -48,6 +50,8 @@ export interface TaskBoardCardBaseProps {
 }
 /**
  * Represents the TaskBoardCardBase component.
+ *
+ * @hidden
  */
 export declare const TaskBoardCardBase: {
     (props: TaskBoardCardBaseProps): JSX.Element;

package/dist/npm/TaskBoardCardBase.js

@@ -23,6 +23,8 @@ var TaskBoardConfirmDialog_1 = require("./TaskBoardConfirmDialog");
 var PreviewDialog_1 = require("./card/PreviewDialog");
 /**
  * Represents the TaskBoardCardBase component.
+ *
+ * @hidden
  */
 exports.TaskBoardCardBase = function (props) {
     var _a;
@@ -70,7 +72,10 @@ exports.TaskBoardCardBase = function (props) {
         setConfirmTaskDeleteVisible(!confirmTaskDeleteVisible);
     };
     var onShowTaskPreviewPane = function () {
-        setShowTaskPreviewPane(!showTaskPreviewPane);
+        setShowTaskPreviewPane(true);
+    };
+    var onClosePreviewPane = function () {
+        setShowTaskPreviewPane(false);
     };
     var onTaskEdit = function () {
         showEditPane(task);
@@ -79,7 +84,7 @@ exports.TaskBoardCardBase = function (props) {
     if (task.isPlaceholder && dragTargetRef && dragTargetRef.current) {
         return (React.createElement("div", __assign({ style: { width: dragTargetRef.current.width, height: dragTargetRef.current.height }, className: 'k-taskboard-drag-placeholder' }, (_a = {}, _a[constants_1.TASKBOARD_PLACEHOLDER] = true, _a))));
     }
-    return (React.createElement(props.cardComponent, { task: task, style: style, tabIndex: props.tabIndex, disabled: props.disabled, elementRef: elementRef, showMenu: optionMenuVisible, showDeleteConfirm: confirmTaskDeleteVisible, showTaskPreviewPane: showTaskPreviewPane, menuItems: optionButtons, popupRef: popupRef, confirmDialogMessage: localization.toLanguageString(messages_1.taskBoardDeleteTaskDialogMessage, messages_1.messages[messages_1.taskBoardDeleteTaskDialogMessage]), confirmDialogTitle: localization.toLanguageString(messages_1.taskBoardDeleteTaskDialogTitle, messages_1.messages[messages_1.taskBoardDeleteTaskDialogTitle]), confirmDialogConfirmButton: localization.toLanguageString(messages_1.taskBoardDeleteTaskConfirmButton, messages_1.messages[messages_1.taskBoardDeleteTaskConfirmButton]), confirmDialogCancelButton: localization.toLanguageString(messages_1.taskBoardDeleteTaskCancelButton, messages_1.messages[messages_1.taskBoardDeleteTaskCancelButton]), previewDialogPriorityLabel: localization.toLanguageString(messages_1.taskBoardPreviewPanePriorityLabel, messages_1.messages[messages_1.taskBoardPreviewPanePriorityLabel]), previewDialogDelete: localization.toLanguageString(messages_1.taskBoardPreviewPaneDeleteBtn, messages_1.messages[messages_1.taskBoardPreviewPaneDeleteBtn]), previewDialogEdit: localization.toLanguageString(messages_1.taskBoardPreviewPaneEditBtn, messages_1.messages[messages_1.taskBoardPreviewPaneEditBtn]), onShowPreviewPane: onShowTaskPreviewPane, onMenuItemSelect: handleSelect, onShowMenu: onShowMenu, onHideMenu: onHideMenu, onMenuButtonBlur: onMenuButtonBlur, onTaskDelete: onDeleteTask, onTaskEdit: onTaskEdit, onCloseConfirmDialog: closeConfirmDialog, card: kendo_react_layout_1.Card, cardHeader: CardHeader_1.TaskBoardCardHeader, cardBody: CardBody_1.TaskBoardCardBody, confirmDialog: TaskBoardConfirmDialog_1.TaskBoardConfirmDialog, previewDialog: PreviewDialog_1.TaskBoardPreviewDialog }));
+    return (React.createElement(props.cardComponent, { task: task, style: style, tabIndex: props.tabIndex, disabled: props.disabled, elementRef: elementRef, showMenu: optionMenuVisible, showDeleteConfirm: confirmTaskDeleteVisible, showTaskPreviewPane: showTaskPreviewPane, menuItems: optionButtons, popupRef: popupRef, confirmDialogMessage: localization.toLanguageString(messages_1.taskBoardDeleteTaskDialogMessage, messages_1.messages[messages_1.taskBoardDeleteTaskDialogMessage]), confirmDialogTitle: localization.toLanguageString(messages_1.taskBoardDeleteTaskDialogTitle, messages_1.messages[messages_1.taskBoardDeleteTaskDialogTitle]), confirmDialogConfirmButton: localization.toLanguageString(messages_1.taskBoardDeleteTaskConfirmButton, messages_1.messages[messages_1.taskBoardDeleteTaskConfirmButton]), confirmDialogCancelButton: localization.toLanguageString(messages_1.taskBoardDeleteTaskCancelButton, messages_1.messages[messages_1.taskBoardDeleteTaskCancelButton]), previewDialogPriorityLabel: localization.toLanguageString(messages_1.taskBoardPreviewPanePriorityLabel, messages_1.messages[messages_1.taskBoardPreviewPanePriorityLabel]), previewDialogDelete: localization.toLanguageString(messages_1.taskBoardPreviewPaneDeleteBtn, messages_1.messages[messages_1.taskBoardPreviewPaneDeleteBtn]), previewDialogEdit: localization.toLanguageString(messages_1.taskBoardPreviewPaneEditBtn, messages_1.messages[messages_1.taskBoardPreviewPaneEditBtn]), onShowPreviewPane: onShowTaskPreviewPane, onClosePreviewPane: onClosePreviewPane, onMenuItemSelect: handleSelect, onShowMenu: onShowMenu, onHideMenu: onHideMenu, onMenuButtonBlur: onMenuButtonBlur, onTaskDelete: onDeleteTask, onTaskEdit: onTaskEdit, onCloseConfirmDialog: closeConfirmDialog, card: kendo_react_layout_1.Card, cardHeader: CardHeader_1.TaskBoardCardHeader, cardBody: CardBody_1.TaskBoardCardBody, confirmDialog: TaskBoardConfirmDialog_1.TaskBoardConfirmDialog, previewDialog: PreviewDialog_1.TaskBoardPreviewDialog }));
 };
 var defaultProps = {};
 exports.TaskBoardCardBase.propTypes = {

package/dist/npm/TaskBoardColumnBase.d.ts

@@ -4,6 +4,8 @@ import { TaskBoardColumnProps } from './column/Column';
 import { TaskBoardColumnModel, TaskBoardPriority, TaskBoardTaskModel } from './TaskBoard';
 /**
  * Represents the props of the TaskBoardColumnBase component
+ *
+ * @hidden
  */
 export interface TaskBoardColumnBaseProps {
     /**
@@ -64,6 +66,8 @@ export interface TaskBoardColumnBaseProps {
 }
 /**
  * Represents the TaskBoardColumnBase component.
+ *
+ * @hidden
  */
 export declare const TaskBoardColumnBase: {
     (props: TaskBoardColumnBaseProps): JSX.Element;

package/dist/npm/TaskBoardColumnBase.js

@@ -24,6 +24,8 @@ var TaskBoardAddCard_1 = require("./TaskBoardAddCard");
 var TaskBoardCardBase_1 = require("./TaskBoardCardBase");
 /**
  * Represents the TaskBoardColumnBase component.
+ *
+ * @hidden
  */
 exports.TaskBoardColumnBase = function (props) {
     var _a;
@@ -79,7 +81,7 @@ exports.TaskBoardColumnBase = function (props) {
         var height = dragTargetRef.current ? dragTargetRef.current.height : 0;
         return (React.createElement("div", __assign({ style: { width: width, height: height }, className: 'k-taskboard-column k-taskboard-drag-placeholder' }, (_a = {}, _a[constants_1.TASKBOARD_PLACEHOLDER] = true, _a))));
     }
-    return (React.createElement(props.columnComponent, { column: props.column, tasks: tasks, priorities: props.priorities, style: Boolean(dragTargetRef) ? __assign({ overflow: 'visible' }, style) : style, tabIndex: props.tabIndex, elementRef: elementRef, dragTargetRef: dragTargetRef, onTaskCreate: onNewTask, onTaskEdit: editTask, onTaskDelete: deleteTask, card: props.cardComponent, header: ColumnHeader_1.TaskBoardColumnHeader, body: ColumnBody_1.TaskBoardColumnBody, confirmDialog: TaskBoardConfirmDialog_1.TaskBoardConfirmDialog, editCardDialog: TaskBoardEditCard_1.TaskBoardEditCard, addCardDialog: TaskBoardAddCard_1.TaskBoardAddCard, onTitleChange: onTitleChange, onColumnEnterEdit: onColumnEnterEdit, onColumnExitEdit: onColumnExitEdit, onColumnConfirmDelete: onConfirmColumnDelete, onShowAddCardDialog: showAddCardDialog, onShowEditCardPane: showEditCardPane, onColumnDelete: onColumnDelete, onCloseDialog: hideCloseModal, showAddCard: addCard, showEditCard: editCardPane, showColumnConfirmDelete: confirmColumnDeleteVisible, editedTask: taskToEdit, confirmDialogMessage: localization.toLanguageString(messages_1.taskBoardDelColumnDialogMsg, messages_1.messages[messages_1.taskBoardDelColumnDialogMsg]), confirmDialogTitle: localization.toLanguageString(messages_1.taskBoardDelColumnDialogTitle, messages_1.messages[messages_1.taskBoardDelColumnDialogTitle]), confirmDialogConfirmButton: localization.toLanguageString(messages_1.taskBoardDelColumnConfirmBtn, messages_1.messages[messages_1.taskBoardDelColumnConfirmBtn]), confirmDialogCancelButton: localization.toLanguageString(messages_1.taskBoardDelColumnCancelBtn, messages_1.messages[messages_1.taskBoardDelColumnCancelBtn]), editButtonTitle: localization.toLanguageString(messages_1.taskBoardEditColumnButton, messages_1.messages[messages_1.taskBoardEditColumnButton]), addButtonTitle: localization.toLanguageString(messages_1.taskBoardAddCardButton, messages_1.messages[messages_1.taskBoardAddCardButton]), closeButtonTitle: localization.toLanguageString(messages_1.taskBoardDeleteColumnButton, messages_1.messages[messages_1.taskBoardDeleteColumnButton]) }, tasks && tasks.map(function (task) {
+    return (React.createElement(props.columnComponent, { column: props.column, tasks: tasks, priorities: props.priorities, style: Boolean(dragTargetRef) ? __assign({ overflow: 'visible' }, style) : style, tabIndex: props.tabIndex, elementRef: elementRef, onTaskCreate: onNewTask, onTaskEdit: editTask, onTaskDelete: deleteTask, card: props.cardComponent, header: ColumnHeader_1.TaskBoardColumnHeader, body: ColumnBody_1.TaskBoardColumnBody, confirmDialog: TaskBoardConfirmDialog_1.TaskBoardConfirmDialog, editCardDialog: TaskBoardEditCard_1.TaskBoardEditCard, addCardDialog: TaskBoardAddCard_1.TaskBoardAddCard, onTitleChange: onTitleChange, onColumnEnterEdit: onColumnEnterEdit, onColumnExitEdit: onColumnExitEdit, onColumnConfirmDelete: onConfirmColumnDelete, onShowAddCardDialog: showAddCardDialog, onShowEditCardPane: showEditCardPane, onColumnDelete: onColumnDelete, onCloseDialog: hideCloseModal, showAddCard: addCard, showEditCard: editCardPane, showColumnConfirmDelete: confirmColumnDeleteVisible, editedTask: taskToEdit, confirmDialogMessage: localization.toLanguageString(messages_1.taskBoardDelColumnDialogMsg, messages_1.messages[messages_1.taskBoardDelColumnDialogMsg]), confirmDialogTitle: localization.toLanguageString(messages_1.taskBoardDelColumnDialogTitle, messages_1.messages[messages_1.taskBoardDelColumnDialogTitle]), confirmDialogConfirmButton: localization.toLanguageString(messages_1.taskBoardDelColumnConfirmBtn, messages_1.messages[messages_1.taskBoardDelColumnConfirmBtn]), confirmDialogCancelButton: localization.toLanguageString(messages_1.taskBoardDelColumnCancelBtn, messages_1.messages[messages_1.taskBoardDelColumnCancelBtn]), editButtonTitle: localization.toLanguageString(messages_1.taskBoardEditColumnButton, messages_1.messages[messages_1.taskBoardEditColumnButton]), addButtonTitle: localization.toLanguageString(messages_1.taskBoardAddCardButton, messages_1.messages[messages_1.taskBoardAddCardButton]), closeButtonTitle: localization.toLanguageString(messages_1.taskBoardDeleteColumnButton, messages_1.messages[messages_1.taskBoardDeleteColumnButton]) }, tasks && tasks.map(function (task) {
         return (React.createElement(TaskBoardCardBase_1.TaskBoardCardBase, { key: task.id, tabIndex: props.tabIndex, task: task, disabled: Boolean(props.column.edit), onDeleteTask: function () { return deleteTask(task); }, showEditPane: function () { return showEditCardPane(task); }, dragTargetRef: props.dragTargetRef, style: { borderLeftColor: task.priority.color }, cardComponent: props.cardComponent }));
     })));
 };

package/dist/npm/TaskBoardConfirmDialog.d.ts

@@ -20,13 +20,13 @@ export interface TaskBoardConfirmDialogProps {
      */
     dialogCancelButton: React.ReactNode;
     /**
-     * Fires when the dialog is closed.
+     * The Close Button click event handler of the TaskBoardConfirmDialog component.
      */
-    onClose: () => void;
+    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Fires when the dialog is confirmed.
+     * The Confirm Button click event handler of the TaskBoardConfirmDialog component.
      */
-    onConfirm: () => void;
+    onConfirm: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**
  * Represents the TaskBoardConfirmDialog component.