@progress/kendo-react-taskboard 5.3.0-dev.202205041411

package/dist/es/TaskBoard.d.ts

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { TaskBoardCardProps } from './card/Card';
+import { TaskBoardColumnProps } from './column/Column';
+/**
+ * Represent the target(props) of the TaskBoardHandle.
+ */
+export interface TaskBoardHandle {
+    /**
+     * The props values of the TackBoard.
+     */
+    props: TaskBoardProps;
+}
+/**
+ * Represents the target of the TaskBoardPriority.
+ */
+export interface TaskBoardPriority {
+    /**
+     * Represents the priority of a TaskBoard.
+     */
+    priority: string;
+    /**
+     * Represents the color of a TaskBoard.
+     */
+    color: string;
+}
+/**
+ * Represent the item model.
+ */
+interface ItemModel {
+    /**
+     * Sets the `id` of an ItemModel.
+     */
+    id: string | number | undefined;
+    /**
+     * Determines the title of an ItemModel.
+     */
+    title: string;
+    /**
+     * Determines the status of an ItemModel.
+     */
+    status: string;
+    /**
+     * Determines of an ItemModel is going to edited.
+     */
+    edit?: boolean;
+    /**
+     * @hidden
+     */
+    isPlaceholder?: boolean;
+}
+/**
+ * Represents the task board column model.
+ */
+export interface TaskBoardColumnModel extends ItemModel {
+}
+/**
+ * Represents the task board task model.
+ */
+export interface TaskBoardTaskModel extends ItemModel {
+    /**
+     * Determined the description of the TaskBoardTaskModel.
+     */
+    description: string;
+    /**
+     * Determined the priority of the TaskBoardTaskModel.
+     */
+    priority: TaskBoardPriority;
+}
+/**
+ * Represents the return type of TaskBoardChangeEvent.
+ */
+export interface TaskBoardChangeEvent {
+    /**
+     * Determines the returned data.
+     */
+    data: {}[] | TaskBoardTaskModel[];
+    /**
+     * Determines the returned type.
+     */
+    type: string;
+    /**
+     * Represents the previous item.
+     */
+    previousItem: TaskBoardColumnModel | TaskBoardTaskModel | null;
+    /**
+     * Represents the current item.
+     */
+    item: TaskBoardColumnModel | TaskBoardTaskModel | null;
+}
+/**
+ * Represents the props of the TaskBoard component
+ */
+export interface TaskBoardProps {
+    /**
+     * Specifies the column data from type TaskBoardColumnModel.
+     */
+    columnData: TaskBoardColumnModel[];
+    /**
+     * Represents the task data from type TaskBoardTaskModel.
+     */
+    taskData: TaskBoardTaskModel[];
+    /**
+     * Specifies the priorities of the task board.
+     */
+    priorities: TaskBoardPriority[];
+    /**
+     * Specifies a list of CSS classes that will be added to the TaskBoard element.
+     */
+    className?: string | Array<string>;
+    /**
+     * Specifies the id that will be added to the TaskBoard element.
+     */
+    id?: string;
+    /**
+     * Specifies the `tabIndex` that will be added to the TaskBoard Column and Card elements.
+     */
+    tabIndex?: number;
+    /**
+     * Represents the styles that are applied to the TaskBoard.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The React elements that will be rendered inside the toolbar of the TaskBoard.
+     */
+    children?: React.ReactNode;
+    /**
+     * Represents the `onChange` event. Triggered after tasks changes.
+     */
+    onChange: (event: TaskBoardChangeEvent) => void;
+    /**
+     * Represents the TaskBoardCard component.
+     */
+    card?: React.ComponentType<TaskBoardCardProps>;
+    /**
+     * Represents the TaskBoardColumn component.
+     */
+    column?: React.ComponentType<TaskBoardColumnProps>;
+}
+/**
+ * Represents the [KendoReact TaskBoard component]({% slug overview_taskboard %}).
+ *
+ * Accepts properties of type [TaskBoardProps]({% slug api_taskboard_taskboardprops %}).
+ */
+export declare const TaskBoard: React.ForwardRefExoticComponent<TaskBoardProps & React.RefAttributes<TaskBoardHandle>>;
+export {};

package/dist/es/TaskBoard.js

@@ -0,0 +1,267 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from './package-metadata';
+import { classNames, useDraggable, clone, noop } from '@progress/kendo-react-common';
+import { TaskBoardColumnBase } from './TaskBoardColumnBase';
+import { TaskBoardCardBase } from './TaskBoardCardBase';
+import { TASKBOARD_COLUMN, TASKBOARD_PLACEHOLDER, TASKBOARD_TASK } from './constants';
+import { closestTaskBoardElement, findIndexes } from './utils';
+import { TaskBoardCard } from './card/Card';
+import { TaskBoardColumn } from './column/Column';
+/**
+ * Represents the [KendoReact TaskBoard component]({% slug overview_taskboard %}).
+ *
+ * Accepts properties of type [TaskBoardProps]({% slug api_taskboard_taskboardprops %}).
+ */
+export var TaskBoard = React.forwardRef(function (props, ref) {
+    validatePackage(packageMetadata);
+    var columnData = props.columnData, className = props.className, style = props.style, id = props.id, taskData = props.taskData, onChange = props.onChange;
+    var taskboardRef = React.useRef(null);
+    var taskboardElementRef = React.useRef(null);
+    React.useImperativeHandle(taskboardRef, function () {
+        return { props: props };
+    });
+    React.useImperativeHandle(ref, function () { return taskboardRef.current; });
+    var children = React.Children.toArray(props.children);
+    var toolbar = children.filter(function (child) { return child &&
+        child.type.displayName === 'KendoReactTaskBoardToolbar'; });
+    var elementRef = React.useRef(null);
+    var dragTargetRef = React.useRef(null);
+    var pressOffsetRef = React.useRef(null);
+    var _a = React.useState(null), taskDataState = _a[0], setTaskDataState = _a[1];
+    var _b = React.useState(null), columnDataState = _b[0], setColumnDataState = _b[1];
+    var _c = React.useState({ top: 0, left: 0 }), position = _c[0], setPosition = _c[1];
+    var dragCardCueRef = React.useRef(null);
+    var dragColumnCueRef = React.useRef(null);
+    var tasksMap = React.useMemo(function () {
+        var map = {};
+        (taskDataState || taskData).forEach(function (task) {
+            var currentStatus = task.status;
+            if (!map[currentStatus]) {
+                map[currentStatus] = [];
+            }
+            map[currentStatus].push(task);
+        });
+        return map;
+    }, [taskData, taskDataState]);
+    var handlePress = React.useCallback(function (event) {
+        var target = event.originalEvent.target;
+        if (target.closest('button,input,.k-link,.k-taskboard-preview-pane')) {
+            return;
+        }
+        var currentDragTarget = closestTaskBoardElement(target);
+        var taskboardEl = taskboardElementRef.current;
+        if (currentDragTarget && taskboardEl) {
+            var isColumn = currentDragTarget.type === TASKBOARD_COLUMN;
+            if (isColumn && !target.closest('.k-taskboard-column-header')) {
+                return;
+            }
+            var dragElement = currentDragTarget.element;
+            var rect = dragElement.getBoundingClientRect();
+            var parentRect = taskboardEl.getBoundingClientRect();
+            pressOffsetRef.current = {
+                x: event.clientX - rect.left + parentRect.left,
+                y: event.clientY - rect.top + parentRect.top
+            };
+            var data = isColumn ? columnData : taskData;
+            var stateSetter = isColumn ? setColumnDataState : setTaskDataState;
+            var index = data.findIndex(function (dataItem) { return String(dataItem.id) === currentDragTarget.id; });
+            var item = data[index];
+            if (index === -1 || item.edit) {
+                return;
+            }
+            var newItem = clone(item);
+            newItem.isPlaceholder = true;
+            var newData = data.slice();
+            newData[index] = newItem;
+            dragTargetRef.current = __assign({}, currentDragTarget, { index: index,
+                item: item, width: rect.width, height: rect.height });
+            setPosition({
+                top: event.clientY - pressOffsetRef.current.y,
+                left: event.clientX - pressOffsetRef.current.x
+            });
+            stateSetter(newData);
+        }
+    }, [columnData, taskData]);
+    var handleDrag = React.useCallback(function (event) {
+        var currentDragTarget = dragTargetRef.current;
+        var dragCueElement = (dragCardCueRef.current && dragCardCueRef.current.element) || dragColumnCueRef.current;
+        if (currentDragTarget && dragCueElement) {
+            setPosition({
+                top: event.clientY - pressOffsetRef.current.y,
+                left: event.clientX - pressOffsetRef.current.x
+            });
+            dragCueElement.style.visibility = 'hidden';
+            var targetElement = document.elementFromPoint(event.clientX, event.clientY);
+            dragCueElement.style.visibility = '';
+            if (targetElement && targetElement.getAttribute(TASKBOARD_PLACEHOLDER)) {
+                return;
+            }
+            var dropTarget_1 = targetElement && closestTaskBoardElement(targetElement);
+            if (dropTarget_1) {
+                var indexes = void 0;
+                var isSameType = dropTarget_1.type === currentDragTarget.type;
+                var isDragTargetColumn = currentDragTarget.type === TASKBOARD_COLUMN;
+                var data = (isDragTargetColumn ? columnDataState : taskDataState) || [];
+                var stateSetter = isDragTargetColumn ? setColumnDataState : setTaskDataState;
+                if (isDragTargetColumn || isSameType) {
+                    indexes = findIndexes(currentDragTarget.id, dropTarget_1.id, data);
+                    if (indexes) {
+                        var dragItem = data[indexes.dragIndex];
+                        var dropItem = data[indexes.dropIndex];
+                        var newDragItem = clone(dragItem);
+                        if (!isDragTargetColumn) {
+                            newDragItem.status = dropItem.status;
+                        }
+                        var newData = data.slice();
+                        newData.splice(indexes.dragIndex, 1);
+                        newData.splice(indexes.dropIndex, 0, newDragItem);
+                        currentDragTarget.index = indexes.dropIndex;
+                        stateSetter(newData);
+                    }
+                }
+                else {
+                    var taskIndex = data.findIndex(function (item) { return String(item.id) === currentDragTarget.id; });
+                    var columnIndex = columnData.findIndex(function (item) { return String(item.id) === dropTarget_1.id; });
+                    if (taskIndex !== -1 && columnIndex !== -1) {
+                        var task = data[taskIndex];
+                        var column = columnData[columnIndex];
+                        var columnStatus = column.status;
+                        if (tasksMap[columnStatus]) {
+                            return;
+                        }
+                        task.status = columnStatus;
+                        var newData = data.slice();
+                        newData.splice(taskIndex, 1);
+                        newData.push(task);
+                        currentDragTarget.index = newData.length - 1;
+                        stateSetter(newData);
+                    }
+                }
+            }
+        }
+    }, [columnDataState, taskDataState, columnData, tasksMap]);
+    var handleRelease = React.useCallback(function () {
+        var currentDragTarget = dragTargetRef.current;
+        if (onChange && currentDragTarget) {
+            var isDragTargetColumn = currentDragTarget.type === TASKBOARD_COLUMN;
+            var data = (isDragTargetColumn ? columnDataState : taskDataState) || [];
+            var item = data[currentDragTarget.index];
+            delete item.isPlaceholder;
+            var event_1 = {
+                data: data,
+                type: currentDragTarget.type,
+                previousItem: currentDragTarget.item,
+                item: item
+            };
+            onChange.call(undefined, event_1);
+        }
+        dragTargetRef.current = null;
+        pressOffsetRef.current = null;
+        setTaskDataState(null);
+        setColumnDataState(null);
+        setPosition({ top: 0, left: 0 });
+    }, [columnDataState, taskDataState, onChange]);
+    useDraggable(elementRef, {
+        onDragStart: handlePress,
+        onDrag: handleDrag,
+        onDragEnd: handleRelease
+    });
+    var dragTarget = dragTargetRef.current;
+    var onTaskCreate = React.useCallback(function (newTask) {
+        var tasks = taskData.concat([newTask]);
+        var event = {
+            data: tasks,
+            type: TASKBOARD_TASK,
+            previousItem: null,
+            item: newTask
+        };
+        onChange.call(undefined, event);
+    }, [onChange, taskData]);
+    var onTaskEdit = React.useCallback(function (task, prevTask) {
+        var tasks = taskData.slice();
+        var index = taskData.indexOf(prevTask);
+        if (index !== -1) {
+            tasks.splice(index, 1, task);
+        }
+        var event = {
+            data: tasks,
+            type: TASKBOARD_TASK,
+            previousItem: prevTask,
+            item: task
+        };
+        onChange.call(undefined, event);
+    }, [onChange, taskData]);
+    var onTaskDelete = React.useCallback(function (task) {
+        var tasks = taskData.filter(function (t) { return t !== task; });
+        var event = {
+            data: tasks,
+            type: TASKBOARD_TASK,
+            previousItem: task,
+            item: null
+        };
+        onChange.call(undefined, event);
+    }, [onChange, taskData]);
+    var onColumnChange = React.useCallback(function (newColumn, prevColumn) {
+        var data = columnData.slice();
+        var index = data.indexOf(prevColumn);
+        if (index !== -1) {
+            if (newColumn) {
+                data.splice(index, 1, newColumn);
+            }
+            else {
+                data.splice(index, 1);
+            }
+        }
+        var event = {
+            data: data,
+            type: TASKBOARD_COLUMN,
+            previousItem: prevColumn,
+            item: newColumn
+        };
+        onChange.call(undefined, event);
+    }, [onChange, columnData]);
+    return (React.createElement("div", { id: id, style: style, ref: taskboardElementRef, className: classNames('k-widget k-taskboard', className) },
+        toolbar,
+        React.createElement("div", { className: 'k-taskboard-content', style: dragTarget ? { userSelect: 'none' } : undefined },
+            React.createElement("div", { className: 'k-taskboard-columns-container', ref: elementRef }, (columnDataState || columnData).map(function (column) { return (React.createElement(TaskBoardColumnBase, { key: column.id, tabIndex: props.tabIndex, column: column, tasks: tasksMap[column.status] || [], dragTargetRef: dragTargetRef, onTaskCreate: onTaskCreate, onTaskEdit: onTaskEdit, onTaskDelete: onTaskDelete, onColumnChange: onColumnChange, columnComponent: props.column || TaskBoardColumn, cardComponent: props.card || TaskBoardCard, priorities: props.priorities })); }))),
+        dragTarget && dragTarget.type === TASKBOARD_TASK && (React.createElement(TaskBoardCardBase, { elementRef: dragCardCueRef, style: {
+                position: 'absolute',
+                width: dragTarget.width,
+                height: dragTarget.height,
+                top: position.top,
+                left: position.left,
+                zIndex: 10,
+                borderLeftColor: dragTarget.item.priority ? dragTarget.item.priority.color : dragTarget.item.color
+            }, task: dragTarget.item, dragTargetRef: dragTargetRef, cardComponent: props.card || TaskBoardCard, onDeleteTask: noop, showEditPane: noop })),
+        dragTarget && dragTarget.type === TASKBOARD_COLUMN && (React.createElement(TaskBoardColumnBase, { elementRef: dragColumnCueRef, style: {
+                position: 'absolute',
+                width: dragTarget.width,
+                height: dragTarget.height,
+                top: position.top,
+                left: position.left,
+                zIndex: 10
+            }, cardComponent: props.card || TaskBoardCard, columnComponent: props.column || TaskBoardColumn, column: dragTarget.item, tasks: tasksMap[dragTarget.item.status], priorities: props.priorities, dragTargetRef: dragTargetRef, onTaskDelete: onTaskDelete, onColumnChange: onColumnChange, onTaskEdit: onTaskEdit, onTaskCreate: onTaskCreate }))));
+});
+var defaultProps = {
+    columnData: [],
+    taskData: []
+};
+TaskBoard.propTypes = {
+    columnData: PropTypes.array.isRequired,
+    taskData: PropTypes.array.isRequired
+};
+TaskBoard.defaultProps = defaultProps;
+TaskBoard.displayName = 'KendoReactTaskBoard';

package/dist/es/TaskBoardAddCard.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { TaskBoardTaskEditPaneProps } from './TaskBoardTaskEditPane';
+import { TaskBoardPriority, TaskBoardTaskModel } from './TaskBoard';
+/**
+ * Represents the props of the TaskBoardAddCard component
+ */
+export interface TaskBoardAddCardProps {
+    /**
+     * Represent the priorities of the task board card.
+     */
+    priorities: TaskBoardPriority[];
+    /**
+     * Triggered on `onClose` event of the TaskBoardAddCard.
+     */
+    onClose: () => void;
+    /**
+     * Triggered on `onSave` event of the TaskBoardAddCard.
+     */
+    onSave: (task: TaskBoardTaskModel, prevTask: TaskBoardTaskModel | undefined) => void;
+    /**
+     * Specifies the TaskBoardTaskEditPane component.
+     */
+    editPane: React.ComponentType<TaskBoardTaskEditPaneProps>;
+}
+/**
+ * Represents the TaskBoardAddCard component.
+ */
+export declare const TaskBoardAddCard: {
+    (props: TaskBoardAddCardProps): JSX.Element;
+    defaultProps: {};
+    displayName: string;
+};

package/dist/es/TaskBoardAddCard.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, taskBoardAddCardPaneTitle, taskBoardAddCardTitleLabel, taskBoardAddCardDescriptionLabel, taskBoardAddCardCreateButton, taskBoardEditPaneCancelBtn, taskBoardEditPaneTitleLabel, taskBoardEditPaneDescriptionLabel, taskBoardEditPanePriorityLabel, taskBoardAddCardPriorityLabel } from './messages';
+import { useTaskEditing } from './hooks/taskEditing';
+/**
+ * Represents the TaskBoardAddCard component.
+ */
+export var TaskBoardAddCard = function (props) {
+    var _a = useTaskEditing(props), onTitleChange = _a.onTitleChange, title = _a.title, onDescriptionChange = _a.onDescriptionChange, description = _a.description, onPriorityChange = _a.onPriorityChange, priority = _a.priority, onSave = _a.onSave;
+    var localization = useLocalization();
+    return (React.createElement(props.editPane, { header: localization.toLanguageString(taskBoardAddCardPaneTitle, messages[taskBoardAddCardPaneTitle]), titleInputTitle: localization.toLanguageString(taskBoardAddCardTitleLabel, messages[taskBoardAddCardTitleLabel]), descriptionInputTitle: localization.toLanguageString(taskBoardAddCardDescriptionLabel, messages[taskBoardAddCardDescriptionLabel]), priorityDropDownTitle: localization.toLanguageString(taskBoardAddCardPriorityLabel, messages[taskBoardAddCardPriorityLabel]), titleLabel: localization.toLanguageString(taskBoardEditPaneTitleLabel, messages[taskBoardEditPaneTitleLabel]), descriptionLabel: localization.toLanguageString(taskBoardEditPaneDescriptionLabel, messages[taskBoardEditPaneDescriptionLabel]), priorityLabel: localization.toLanguageString(taskBoardEditPanePriorityLabel, messages[taskBoardEditPanePriorityLabel]), saveButton: localization.toLanguageString(taskBoardAddCardCreateButton, messages[taskBoardAddCardCreateButton]), cancelButton: localization.toLanguageString(taskBoardEditPaneCancelBtn, messages[taskBoardEditPaneCancelBtn]), priorities: props.priorities, onSave: onSave, onClose: props.onClose, onTitleChange: onTitleChange, title: title, onDescriptionChange: onDescriptionChange, description: description, onPriorityChange: onPriorityChange, priority: priority }));
+};
+var defaultProps = {};
+TaskBoardAddCard.propTypes = {};
+TaskBoardAddCard.defaultProps = defaultProps;
+TaskBoardAddCard.displayName = 'KendoReactTaskBoardAddCard';

package/dist/es/TaskBoardCardBase.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { CardHandle } from '@progress/kendo-react-layout';
+import { TaskBoardCardProps } from './card/Card';
+import { TaskBoardTaskModel } from './TaskBoard';
+/**
+ * Represents the props of the TaskBoardCardBase component
+ */
+export interface TaskBoardCardBaseProps {
+    /**
+     * The task of the TaskBoardCardBase.
+     */
+    task: TaskBoardTaskModel;
+    /**
+     * The styles for the TaskBoardCardBase.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Determines the disabled mode.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the `tabIndex` that will be added to the TaskBoard Column and Card elements.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the CardHandle reference.
+     */
+    elementRef?: React.RefObject<CardHandle>;
+    /**
+     * Specifies the width and height of the drag target reference.
+     */
+    dragTargetRef?: React.RefObject<{
+        width: number;
+        height: number;
+    }>;
+    /**
+     * Fires when a task is deleted.
+     */
+    onDeleteTask: () => void;
+    /**
+     * Represents the `showEditPane` event.
+     */
+    showEditPane: (task: TaskBoardTaskModel) => void;
+    /**
+     * Represents the TaskBoardCard component.
+     */
+    cardComponent: React.ComponentType<TaskBoardCardProps>;
+}
+/**
+ * Represents the TaskBoardCardBase component.
+ */
+export declare const TaskBoardCardBase: {
+    (props: TaskBoardCardBaseProps): JSX.Element;
+    defaultProps: {};
+    displayName: string;
+};

package/dist/es/TaskBoardCardBase.js

@@ -0,0 +1,87 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Card } from '@progress/kendo-react-layout';
+import { TASKBOARD_PLACEHOLDER } from './constants';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, taskBoardDeleteTaskDialogMessage, taskBoardDeleteTaskDialogTitle, taskBoardDeleteTaskConfirmButton, taskBoardDeleteTaskCancelButton, taskBoardEditCardButton, taskBoardDeleteCardButton, taskBoardPreviewPanePriorityLabel, taskBoardPreviewPaneDeleteBtn, taskBoardPreviewPaneEditBtn } from './messages';
+import { TaskBoardCardHeader } from './card/CardHeader';
+import { TaskBoardCardBody } from './card/CardBody';
+import { TaskBoardConfirmDialog } from './TaskBoardConfirmDialog';
+import { TaskBoardPreviewDialog } from './card/PreviewDialog';
+/**
+ * Represents the TaskBoardCardBase component.
+ */
+export var TaskBoardCardBase = function (props) {
+    var _a;
+    var onDeleteTask = props.onDeleteTask, showEditPane = props.showEditPane, task = props.task, style = props.style, dragTargetRef = props.dragTargetRef, elementRef = props.elementRef;
+    var _b = React.useState(false), optionMenuVisible = _b[0], setOptionMenuVisible = _b[1];
+    var _c = React.useState(false), confirmTaskDeleteVisible = _c[0], setConfirmTaskDeleteVisible = _c[1];
+    var _d = React.useState(false), showTaskPreviewPane = _d[0], setShowTaskPreviewPane = _d[1];
+    var popupRef = React.useRef(null);
+    var localization = useLocalization();
+    var optionButtons = [
+        {
+            text: localization.toLanguageString(taskBoardEditCardButton, messages[taskBoardEditCardButton]),
+            icon: 'edit',
+            data: function () {
+                showEditPane(task);
+                setOptionMenuVisible(!optionMenuVisible);
+            }
+        },
+        {
+            text: localization.toLanguageString(taskBoardDeleteCardButton, messages[taskBoardDeleteCardButton]),
+            icon: 'delete',
+            data: function () {
+                setConfirmTaskDeleteVisible(!confirmTaskDeleteVisible);
+                setOptionMenuVisible(!optionMenuVisible);
+            }
+        }
+    ];
+    var handleSelect = function (e) {
+        e.item.data();
+    };
+    var onShowMenu = function () {
+        setOptionMenuVisible(true);
+    };
+    var onHideMenu = function () {
+        setOptionMenuVisible(false);
+    };
+    var onMenuButtonBlur = function (event) {
+        var popup = popupRef.current && popupRef.current.element;
+        if (popup && popup.contains(event.relatedTarget)) {
+            return;
+        }
+        setOptionMenuVisible(false);
+    };
+    var closeConfirmDialog = function () {
+        setConfirmTaskDeleteVisible(!confirmTaskDeleteVisible);
+    };
+    var onShowTaskPreviewPane = function () {
+        setShowTaskPreviewPane(!showTaskPreviewPane);
+    };
+    var onTaskEdit = function () {
+        showEditPane(task);
+        onShowTaskPreviewPane();
+    };
+    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 }));
+};
+var defaultProps = {};
+TaskBoardCardBase.propTypes = {
+    task: PropTypes.object.isRequired
+};
+TaskBoardCardBase.defaultProps = defaultProps;
+TaskBoardCardBase.displayName = 'KendoReactTaskBoardCardBase';

package/dist/es/TaskBoardColumnBase.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { TaskBoardCardProps } from './card/Card';
+import { TaskBoardColumnProps } from './column/Column';
+import { TaskBoardColumnModel, TaskBoardPriority, TaskBoardTaskModel } from './TaskBoard';
+/**
+ * Represents the props of the TaskBoardColumnBase component
+ */
+export interface TaskBoardColumnBaseProps {
+    /**
+     * The rendered column.
+     */
+    column: TaskBoardColumnModel;
+    /**
+     * The rendered tasks.
+     */
+    tasks: TaskBoardTaskModel[];
+    /**
+     * The rendered priorities.
+     */
+    priorities: TaskBoardPriority[];
+    /**
+     * The applied styles.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies the `tabIndex` that will be added to the TaskBoard Column and Card elements.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the element reference.
+     */
+    elementRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Specifies the width and height of the drag target reference.
+     */
+    dragTargetRef?: React.RefObject<{
+        width: number;
+        height: number;
+    }>;
+    /**
+     * Fires when a task is created.
+     */
+    onTaskCreate: (task: TaskBoardTaskModel) => void;
+    /**
+     * Fires when a task is edited.
+     */
+    onTaskEdit: (task: TaskBoardTaskModel, prevTask: TaskBoardTaskModel) => void;
+    /**
+     * Fires when a task is deleted.
+     */
+    onTaskDelete: (task: TaskBoardTaskModel) => void;
+    /**
+     * Fires when a column is changed.
+     */
+    onColumnChange: (column: TaskBoardColumnModel, prevColumn: TaskBoardColumnModel) => void;
+    /**
+     * Determines the TaskBoardCard component.
+     */
+    cardComponent: React.ComponentType<TaskBoardCardProps>;
+    /**
+     * Determines the TaskBoardColumn component.
+     */
+    columnComponent: React.ComponentType<TaskBoardColumnProps>;
+}
+/**
+ * Represents the TaskBoardColumnBase component.
+ */
+export declare const TaskBoardColumnBase: {
+    (props: TaskBoardColumnBaseProps): JSX.Element;
+    defaultProps: {};
+    displayName: string;
+};